Summer sale! Save 50% on access to our entire library of courses.Join here →

Bi-directional communication with Laravel Reverb

July 6th, 2024

In this article, we'll look at how we can listen to client-only events with Laravel Reverb, intercept the data sent and use this data to perform an action on the server.

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.

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 ='chat')

const sendTypingEvent = () => {

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?

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

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

class HandleMessageReceived
    public function handle(object $event): void

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!

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') {

    // 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!

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.

Thanks for reading! If you found this article helpful, you might enjoy our practical screencasts too.
Alex Garrett-Smith
Share :


No comments, yet. Be the first to leave a comment.