Bi-directional communication with Laravel Reverb

When we think of WebSocket communication, it's usually only to push messages from the server to all connected clients. WebSockets, by nature, are bi-directional, meaning we can listen both ways.

A quick example¶

Whispering is a good example since it's client-to-client and doesn't run through your server to broadcast to all clients.

Here's what this looks like using Laravel Echo:

const channel = Echo.channel('chat')

const sendTypingEvent = () => {
    channel.whisper('typing')
}

This whisper event gets sent to all connected clients. But what if we want to listen to this whisper event and perform an action on the server?

Hooking into Reverb's events¶

When running a Reverb server, Reverb will dispatch a MessageReceived event whenever a message is received. It'll do this for all messages on the server, even whispers.

Let's hook into that event and do something. In your AppServiceProvider, assign a listener to this event:

use App\Listeners\HandleMessageReceived;
use Laravel\Reverb\Events\MessageReceived;

public function boot(): void
{
    Event::listen(
        MessageReceived::class,
        HandleMessageReceived::class,
    );
}

In your listener, log something to your laravel.log file.

class HandleMessageReceived
{
    public function handle(object $event): void
    {
        \Log::info('received!');
    }
}

Really importantly, you'll need to restart your Reverb server whenever you change the code within the listener since Reverb is long-running.

Once you've done that, whisper something client-to-client; you'll see this get picked up on the server. And that's it, bi-directional communication with Reverb!

Structuring the data¶

Because MessageReceived gets dispatched for every message, we'll need to make sure we're listening to the right event and only performing an action server-side when required.

Here's an example inside the listener:

public function handle(object $event): void
{
    $payload = json_decode($event->message);
    $data = $payload->data;

    if ($payload->event !== 'client-typing') {
        return;
    }

    // Do something here
}

Let's break this down.

1. We decode the event message containing the event name and data.
2. We extract the data from the payload (this is the data sent alongside the event, which you can use to do something with)
3. We compare the event to the one we want to act on. Client events are prefixed with client-, so we listen for the client-typing event in our typing example.
4. We do something (anything) with the data!

Conclusion¶

So, bi-directional communication with Reverb isn't too tricky. Reverb gives us the MessageReceived event to hook into, and we can extract any data that rolls into our WebSocket server.