Realtime Online User Indicator in Laravel with Laravel Echo and Reverb

Why Realtime Collaboration Matters

In today’s digital landscape, real-time collaboration has become a necessity. Whether you are working on a document, a design, or even a BPMN diagram, seeing who is online and actively contributing provides a seamless and engaging experience. This is exactly what AlurKerja aims to achieve.

At AlurKerja, we built a Realtime Online User Indicator using Laravel Echo and Laravel Reverb to enhance user collaboration within our BPMN modeler. This feature allows users to see who is currently online and get updates on changes in real time.

Installation and Setup

Before implementing the real-time user indicator, ensure you have the necessary dependencies installed:

Install Laravel Dependencies

composer require laravel/echo pusher/pusher-php-server

Install React Dependencies

npm install laravel-echo pusher-js

Configure Environment Variables

Set up your .env file with the necessary Reverb configurations:

VITE_REVERB_APP_KEY=your-app-key
VITE_REVERB_HOST=your-reverb-host
VITE_REVERB_PORT=your-reverb-port
VITE_REVERB_SCHEME=https

Setting Up Laravel Echo with Reverb

First, let’s configure Laravel Echo with Reverb in our frontend React application. Create a new file echo.js and add the following setup:

import Echo from "laravel-echo";
import Pusher from "pusher-js";

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: "reverb",
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? "https") === "https",
    enabledTransports: ["ws", "wss"],
});

Then, import this file into your React application to ensure Echo is initialized globally.

Creating a Realtime Event in Laravel

Next, in Laravel, we define an event BpmnUpdated to broadcast changes in the BPMN modeler.

class BpmnUpdated implements ShouldBroadcastNow {
    use Dispatchable, InteractsWithSockets, SerializesModels, InteractsWithBroadcasting;
    
    public $tenantId, $fileId, $userName, $type, $userId, $version;

    public function __construct($userName, $tenantId, $fileId, $type, $userId, $version) {
        $this->broadcastVia('reverb');
        $this->tenantId = $tenantId;
        $this->fileId = $fileId;
        $this->userName = $userName;
        $this->type = $type;
        $this->userId = $userId;
        $this->version = $version;
    }

    public function broadcastOn(): array {
        return [new PresenceChannel("bpmn-updated.{$this->tenantId}.{$this->fileId}")];
    }
}

Broadcasting the Event

Now, whenever a user makes a change to the BPMN diagram, we broadcast the event using:

broadcast(new BpmnUpdated(
    userName: $user->name,
    tenantId: $validated['tenant_id'],
    fileId: $validated['drive_id'],
    type: 'modified the diagram!',
    userId: $user->id,
    version: $newVersion
))->toOthers();

Listening for Updates in React

Finally, in our React application, we listen for this event and update the UI accordingly.

const channel = window.Echo.join(`bpmn-updated.${modelerData?.tenantId}.${modelerData?.fileId}`)
    .here((users) => dispatch(setUsers(users)))
    .joining((user) => {
        dispatch(addUser(user));
        toast({ description: `${user?.name} joined the diagram!` });
    })
    .leaving((user) => {
        dispatch(removeUser(user.id));
        toast({ description: `${user?.name} leaving the diagram!` });
    })
    .listen("BpmnUpdated", (event) => {
        if (event.userId != userId) {
            getBroadcastedXml(modelerData?.tenantId, modelerData?.fileId).then((res) => {
                const { xml, version } = res.data;
                if (xml) {
                    modeler.current?.importXML(xml);
                    setXml(xml);
                    setVersion(version);
                    toast({ description: `${event.userName} ${event.type}` });
                }
            });
        }
    });

Conclusion

With this implementation, AlurKerja provides a Realtime Online User Indicator that allows users to collaborate seamlessly on BPMN diagrams. Using Laravel Echo, Laravel Reverb, and React, we ensure that users are always aware of ongoing changes and can engage in real-time updates efficiently.

This feature significantly improves collaboration, reduces conflicts in editing, and enhances the overall user experience in AlurKerja. 🚀