Introduction

Reverb is a first-party WebSocket server for Laravel applications, bringing real-time communication between client and server directly to your fingertips. In this article, we'll be looking at how we can install and configure Laravel Reverb on a fresh Laravel project, and we'll be using Livewire to listen for the broadcasted events.

Installation

So, let's start by installing a fresh laravel project. If you already have a project, you can skip this step. We'll be using the latest version of Laravel (v11) for this tutorial.

laravel new reverb-tutorial

And if you've upgraded the project from v10 to v11, there are a few additional steps you need to follow. And I'll be covering those steps in this article, as we progress.

Laravel Reverb Installation

Once you have the fresh Laravel project installed, you can install Laravel Reverb by running the following command:

php artisan install:broadcasting

This command will install the reverb package and set up the necessary configurations for you. It will also publish the configuration files (reverb.php, broadcasting.php, and channels.php) for you to make any changes if needed.

We'll also be prompted to install the frontend dependencies. You can just choose the default option, which is yes.

Note for Projects Upgraded from Laravel 10

If you've upgraded your project from Laravel 10 to Laravel 11, you need to make sure that you've updated the broadcasting.php file accordingly. Since this file was already present in v10, reverb doesn't over-ride it and we need to make sure that there's no mismatch between the .env file and this file.

We can fix this by checking the .env first, where the key is defined as BROADCAST_CONNECTION=reverb and on the broadcasting.php file, make sure it is set like so:

'default' => env('BROADCAST_CONNECTION', 'null'),

In Laravel 10, the key is set as BROADCAST_DRIVER, so make sure to update that.

Configuration

Everything is almost set up, we just need to make a few changes based on our project configuration.

The first thing we'll update here is depending on the http scheme your project is using, you might need to update the .env file to either http or https.

REVERB_SCHEME=https

We also need to update the REVERB_HOST according to our project's APP_URL. I'm pasting the .env file here for reference, I've trimmed down the unnecessary configurations for this tutorial:

APP_URL=http://reverb-tutorial.test
BROADCAST_CONNECTION=reverb

# by default the queue connection is set to database,
# and if you dont want to use queue,
# you can set it to sync
QUEUE_CONNECTION=sync

# note that I'm not passing the http or https here,
# as it's already defined in the REVERB_SCHEME
REVERB_HOST="reverb-tutorial.test"
REVERB_PORT=8080
REVERB_SCHEME=https

Make sure to run npm run dev in the terminal to compile the assets, and you're good to go.

Its Time to Reverb

Now that we have everything set up, we can start listening to the broadcasted events. We'll be using Livewire to listen to the events. So, let's start by installing Livewire and let's create a new Livewire component.

composer require livewire/livewire

And then create a new Livewire component, I'll name it Dashboard for this tutorial:

php artisan make:livewire Dashboard

Lets open the Dashboard component and define a listener, which will listen to the public channel called dashboard and the event OrderShipped.

To define an event in Livewire, we'll use the On attribute, and we'll also pass the echo: prefix, which will instruct Livewire to listen for events made from Laravel Echo.

For now, we'll dump the payload to the screen, but you can do anything you want with the payload.

Here's how the component looks like:

<?php

namespace App\Livewire;

use Livewire\Attributes\On;
use Livewire\Component;

class Dashboard extends Component
{
    public function render()
    {
        return view('livewire.dashboard');
    }

    #[On('echo:dashboard,OrderShipped')]
    public function dump($payload)
    {
        dd($payload);
    }
}

Let's go ahead and define this OrderShipped event in our Laravel application. We can do this by creating a new event:

php artisan make:event OrderShipped

And since we want to broadcast this event, we need to implement the ShouldBroadcast interface in the event class, and for now we'll broadcast it to the public channel, and name the channel as dashboard.

Here's how the event looks like:

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class OrderShipped implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     */
    public function __construct(public int $orderId = 1)
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new Channel('dashboard'),
        ];
    }
}

I've also passed an orderId to the event, and this can be passed as a parameter when we dispatch this event. Something like so:

OrderShipped::dispatch(1);

Since we're passing a dummy id here, and we're dumping the payload on our listener, this will be dumped when the listener is executed.

Let's now go ahead and run the reverb:start command:

php artisan reverb:start --debug

This command will start the reverb server, and you can see the logs in the terminal.

Now, the final thing is to dispatch the Event. And there's multiple ways to dispatch an event, but for now, we'll use tinker to dispatch the event.

On the tinker console, we can dispatch the event like so:

App\Events\OrderShipped::dispatch(1);

And you should see the payload dumped on the screen.

Video Resource

If you prefer a video instead of a blog, you can check out this video which I launched recently.

Conclusion

And that's it! We've successfully installed and configured Laravel Reverb on a fresh Laravel project. You can now start listening to the broadcasted events and do anything you want with the payload.

You can check out the Github repository for this tutorial here.

And if you have any questions, feel free to message me on Twitter @TapanSharma__.

How to Install and Configure Laravel Reverb on a Laravel Project