Overview

Implement Real-Time Notifications in Laravel 11 Using Laravel Reverb & Laravel Echo

Since Laravel Reverb is Laravel 11’s built-in WebSocket server, we’ll set it up with Laravel Echo to enable real-time notifications.

Step 1: Install Laravel Reverb

Run the following command in your Laravel 11 project:

composer require laravel/reverb

Then, publish the Reverb configuration:

php artisan reverb:install

This will generate a config/reverb.php file.

Step 2: Start Laravel Reverb WebSocket Server

Run:

php artisan reverb:start

Your WebSocket server will be running at:

ws://127.0.0.1:6001

To keep it running in the background, use:

php artisan reverb:start --daemon

Step 3: Configure Laravel Echo in Frontend

First, install Laravel Echo and Pusher JS:

npm install laravel-echo pusher-js

Then, update resources/js/bootstrap.js:

import Echo from "laravel-echo"; 
import Pusher from "pusher-js";  
window.Echo = new Echo({
    broadcaster: "pusher",
    key: "anykey", // Reverb does not require a real key
    wsHost: window.location.hostname,
    wsPort: 6001,
    forceTLS: false,
    disableStats: true,
});

Now, rebuild your frontend:

npm run dev

Step 4: Configure Laravel Broadcasting

In .env, set:

BROADCAST_DRIVER=pusher

Update config/broadcasting.php to use Reverb:

'connections' => [
    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'host' => env('REVERB_HOST', '127.0.0.1'),
            'port' => env('REVERB_PORT', 6001),
            'scheme' => 'http',
        ],
    ], 
],

Step 5: Create an Event for Notifications

Run:

php artisan make:event NewNotification

Modify app/Events/NewNotification.php:

namespace App\Events;
use Illuminate\Broadcasting\InteractsWithSockets; 
use Illuminate\Broadcasting\PrivateChannel; 
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable; 
use Illuminate\Queue\SerializesModels;
class NewNotification implements ShouldBroadcast {
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('notifications');
    }

    public function broadcastAs()
    {
        return 'new-notification';
    } 
}

Step 6: Broadcast the Event in a Controller

Modify routes/web.php:

use App\Events\NewNotification;
use Illuminate\Support\Facades\Route;

Route::get('/send-notification', function () {
    broadcast(new NewNotification("Hello! This is a real-time notification"));
    return response()->json(['message' => 'Notification sent']);
});

Step 7: Listen for Notifications in JavaScript

Modify your JavaScript frontend code to listen for real-time events:

window.Echo.private("notifications")
.listen(".new-notification", (e) => {
    alert("New Notification: " + e.message);
});

Step 8: Start Everything

Run the following commands to start the servers:

php artisan reverb:start  # Start WebSocket 
server npm run dev        # Start frontend 
php artisan serve         # Start Laravel

Now, visit:

http://127.0.0.1:8000/send-notification

You should see a real-time notification alert in your browser! 🚀

🔥 Final Setup Summary

✅Installed Laravel Reverb for WebSockets
✅ Configured Laravel Echo for real-time listening
✅ Used Broadcasting Events to send notifications
✅ Successfully displayed real-time notifications in JS frontend

Would you like help securing WebSockets with authentication? 🔒🚀

add presence channels (to show online users)? 🚀