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

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

Daniel Kelly
Daniel Kelly
June 18th 2024

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.

Start learning Vue.js for free

Daniel Kelly
Daniel Kelly
Daniel is the lead instructor at Vue School and enjoys helping other developers reach their full potential. He has 10+ years of developer experience using technologies including Vue.js, Nuxt.js, and Laravel.

Latest Vue School Articles

Tightly Coupled Components Vue Components with Provide/Inject

Tightly Coupled Components Vue Components with Provide/Inject

In this article, learn how to create tightly coupled components with Vue’s provide/inject functions. This component design strategy is great for creating components that are intuitive to use together and rely on shared state!
Daniel Kelly
Daniel Kelly
How to Create Supabase Database Migration Files in Vue.js

How to Create Supabase Database Migration Files in Vue.js

In this guide, we’ll focus on creating migration files for a remote Supabase database, ensuring that our the database is updated directly from within our Vue.js project.
Mostafa Said
Mostafa Said

Our goal is to be the number one source of Vue.js knowledge for all skill levels. We offer the knowledge of our industry leaders through awesome video courses for a ridiculously low price.

More than 120.000 users have already joined us. You are welcome too!

Follow us on Social

© All rights reserved. Made with ❤️ by BitterBrains, Inc.