What is Laravel Reverb?

Laravel Reverb is a WebSocket server designed to facilitate swift and scalable real-time communication within your Laravel applications. This tool integrates seamlessly with Laravel's event broadcasting features, particularly the PresenceChannel, which allows tracking of active users—this is a game-changer for apps that depend on real-time user data.

Use Cases for Laravel Reverb

• Real-Time Chat Applications: Ideal for platforms requiring instantaneous communication, such as customer support or social media networks.
• Instant Notifications: Keep users updated with order statuses or new content alerts.
• Live Dashboards: Monitor real-time data, particularly useful for IoT and management systems.
• Horizontal Scalability: Reverb excels in environments demanding scalability, utilizing Redis to support numerous real-time connections.

When to Avoid Overusing Reverb?

While Reverb is effective for scenarios needing quick and continuous communication, it may not be necessary for applications that can operate on traditional, infrequent HTTP requests for data updates. Over-reliance on WebSockets can introduce unnecessary complexity and strain on server resources.

Business Needs Addressed by Reverb

• Boosting User Engagement: Interactive, dynamic interfaces are crucial for enhancing user involvement in modern web applications.
• Minimizing Latency: Real-time updates and notifications provide users with immediate feedback.
• Facilitating Modern Application Development: Real-time communication is essential for building contemporary, interactive web applications.

Step 1: Setting Up Your Laravel Project

To begin, create a new Laravel project if you haven't done so already:

laravel new realtime-counter

cd realtime-counter

Step 2: Installing Laravel Reverb

Next, let’s install Laravel Reverb. As it is currently in beta, specify this during the installation process:

composer require laravel/reverb:@beta

Then, publish the configuration:

php artisan reverb:install

Step 3: Configuring Reverb

You will typically need to set up the REVERB_APP_ID, REVERB_APP_KEY, and REVERB_APP_SECRET. However, please note that, as of February 26, we do not have accurate information on where to obtain these credentials, so keep an eye on Laravel's official website for updates.

Step 4: Setting Up the Channel

Create an event for broadcasting on the Reverb channel, naming it VisitorCountUpdated:

php artisan make:event VisitorCountUpdated

Here’s a glimpse of what our event app/Events/VisitorCountUpdated.php might look like:

public $visitorCount;

public function __construct($visitorCount)

{

$this->visitorCount = $visitorCount;

}

public function broadcastOn()

{

return new PresenceChannel('reverb');

}

Notice that we utilize the PresenceChannel instead of a standard Channel to track users.

Step 5: Configuring Routing and Controller

In routes/web.php, add a new route:

Route::get('/counter/increase', 'CounterController@increase')->name('counter.increase');

Next, create a controller to handle the counter increment:

php artisan make:controller CounterController

Edit app/Http/Controllers/CounterController.php to include:

increment('counter');

event(new CounterIncreased($counter));

return response()->json(['counter' => $counter]);

Step 6: Frontend — Setting Up Laravel Echo

In resources/js/bootstrap.js, configure Laravel Echo to listen on the Reverb channel:

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({

broadcaster: 'pusher',

key: process.env.MIX_PUSHER_APP_KEY,

cluster: process.env.MIX_PUSHER_APP_CLUSTER,

encrypted: true

});

Ensure your .env file contains the correct values for the MIX_PUSHER_APP_* keys.

Step 7: Frontend — Listening for Events and Incrementing the Counter

Update resources/views/welcome.blade.php to add a button and handle events:

<button id="incrementCounter">Increment Counter</button>

<div>Current counter value: <span id="counterValue">0</span></div>

const counter = document.getElementById('counterValue');

const button = document.getElementById('incrementCounter');

// Listen for incoming events from the 'reverb' channel

Echo.channel('reverb')

.listen('CounterIncreased', (e) => {

counter.innerText = e.counterValue;

});

// Function to call the endpoint and increment the counter

button.addEventListener('click', () => {

fetch('/counter/increase')

.then(response => response.json())

.then(data => {

counter.innerText = data.counter; // Update the counter on the page

});

});

In this JavaScript code, we use Laravel Echo to listen for the CounterIncreased event on the 'reverb' channel. When the event is triggered, the counter value on the page is updated. Additionally, clicking the 'incrementCounter' button sends a request to the server, which increments the counter, and the server's response updates the displayed value.

Step 8 (Optional): Configuring Supervisor

To ensure uninterrupted operation of the Reverb server, configure Supervisor. Install Supervisor on your server:

sudo apt-get install supervisor

Create a new configuration file for Laravel Reverb in the Supervisor directory:

sudo nano /etc/supervisor/conf.d/reverb.conf

Add the following configuration:

[program:reverb]

process_name=%(program_name)s

command=php /path/to/your/laravel/app/artisan reverb:start

autostart=true

autorestart=true

user=www-data

redirect_stderr=true

stdout_logfile=/path/to/your/laravel/app/storage/logs/reverb.log

Make sure to replace /path/to/your/laravel/app/ with the actual path to your Laravel application.

To apply the new configuration and start the process, use the commands:

sudo supervisorctl reread

sudo supervisorctl update

sudo supervisorctl start reverb

Step 9: Testing the Counter Functionality

Finally, let's test our entire setup:

1. Open your Laravel application in a browser.
2. Launch another browser instance or incognito mode and access the same page.
3. Click the increment button in one of the windows and observe the counter increase in both instances.

If everything is configured correctly, both browser windows should reflect the same updated counter value in real-time, confirming the successful WebSocket communication via Laravel Reverb.