Who's Online: User X is Viewing the Page

Link to the repository

[Only for premium members]

Reverb has many potential use cases, one of them being presence channels. They allow us to see who's online in real time. For example, we can show a list of people viewing the page/document:

This tutorial will take a simple "Document view" page and add a list of users viewing the page, updating it in real-time whenever someone joins/leaves the page. We'll use Reverb's presence channels to do this.

Project

Our current project is really simple. We have a Document model and a DocumentController with a show() method. This method returns a view with the document's content.

app/Http/Controllers/DocumentController.php

public function show(Document $document)
{
    return view('documents.show', compact('document'));
}

This returns a simple view with the document's content:

resources/views/documents/show.blade.php

<x-app-layout>
    {{-- ... --}}
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                <div class="p-6 sm:px-20 bg-white border-b border-gray-200">
                    <div class="text-2xl">
                        {{ $document->title }}
                    </div>
                    <div class="mt-6 text-gray-500">
                        {{ $document->description }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

This gives us a very simple page with the document's title and description:

Overview

We want to add a list of users currently viewing the document. This list needs to be updated in real-time as people enter and leave the page. Here's exactly what we want:

• Add Echo presence channel to our document
• On page load - create a list of people viewing the document from an HTML template (avatar and name)
• When on a page and someone else enters - add them to the list automatically
• When on a page and someone else leaves - remove them from the list automatically

So, let's start by installing Reverb.

Install and Run the Reverb

To install Reverb, we have to call this command:

php artisan install:broadcasting

This will ask us if we want to install Reverb, enter yes and press Enter.

Once the package installs - it will ask if we want Node dependencies to be installed. Enter yes and press Enter.

That's it! Reverb is installed and ready to be used. No more configuration is needed at this point.

Adding Real-Time Presence Channels

Next, we need to implement channels in our application. This is done by...