How to use Laravel Reverb to Send Real-Time Data to a Vue.js Frontend

What Is Laravel Reverb?

Do you like pairing Vue.js with Laravel backends? Do you need real-time data support for your application? Then Laravel Reverb is the solution for you! It’s a blazing fast and scalable real-time WebSocket solution enabling async communication from your backend to your front-end.

Gone are the days of having to continually poll your backend to check for some background process to finish. Such polling taxes your backend with unnecessary requests and comes with some state juggling in the front-end that can be just plain hard to manage.

Instead, with Reverb, you can fire an event on the backend which sends the data directly to the browser without the front-end app having to make any new request. All that’s needed on the front-end is to subscribe to such server events and then react accordingly.

How do I get started?

Installing Laravel Reverb

To install reverb to an existing Laravel project run the following command. This does all the heavy lifting for you!

php artisan install:broadcasting 

This updates and adds several new files your project:

1. composer.json - adds the reverb dependency (backend websocket server)
2. package.json - adds echo and pusher.js (front end libraries to listen for messages from the websocket server)
3. app.php - a new route file is registered (channels.php)
4. broadcasting.php - config file for broadcast settings
5. reverb.php - config file for reverb settings
6. bootstrap.js and echo.js - echo is installed on frontend
7. channels.php - a default broadcast channel for users to get real time info about their own user

Triggering an Event on the Server

Every real time data broadcast starts with an event. You can create a new event like so:

php artisan make:event SendAnnouncement

This creates the following file and we can update it to include some data.

<?php

namespace App\Events;
// use statements...

// must implement ShouldBroadcast to support real-time data
class SendAnnouncement implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    // accept data to broadcast the constructor
    public function __construct($message)
    {
        $this->message = $message;
    }

    // create the channels that the event should broadcast on
    public function broadcastOn(): array
    {
        return [
                // data that is broadcast to everyone use the `Channel` class
                // data that is protected in some way will use the `PrivateChannel` class 
            new Channel('announcements'),
        ];
    }
}

Then whenever we want to send any data to the browser we simply dispatch the event with the needed data.

SendAnnouncement::dispatch("We've got a new announcement!");

Listening for Events in the Browser

In order to catch the event on the browser side we need to listen for it with Echo. In a Vue.js app, that would look something like this:

<script setup>
const announcements = ref([])
Echo.channel("announcements").listen("SendAnnouncement", (e) => {
    announcements.value.push(e)
});
</script>

Startup the Reverb Server

With the event trigger and listeners in place, the last step is to ensure the Reverb service is running. This is a separate process from the application server. You start it like this:

php artisan reverb:start

And that’s it! You’ve now got real time support!

The Jobs Queue and Laravel Reverb

If things aren’t working for you yet, there’s one caveat worth mentioning. Laravel’s events are handled by the job queue. Therefore you must have you job queue process running as well.

php artisan queue:work

Or, if your on local and just want to run all queued jobs synchronously, you can set the following in .env.

QUEUE_CONNECTION=sync

Conclusion

If you need to work with Laravel Reverb and Vue, consider taking our course: Real-Time Data with Laravel Reverb and Vue.js. In it, we discuss several of the concepts discussed in this article but also dive deeper with easy to follow video tutorials. We also teach you how to broadcast private data only to specific users.