Laravel Reverb Demo: Real-Time Notification on Completed Task

Some Laravel tasks are running in the background; you must check whether they are finished. But what if you didn't need to constantly check but rather "listen" for those events to finish? Let's implement exactly this real-time feedback with the Reverb server.

This is our task: allow the user to export some files and tell the user when the file is prepared for download.

In this tutorial, I will show you how to implement it with the official Laravel Reverb tool. There are other alternatives, but we are currently focusing on official Laravel tools.

What we'll cover in this tutorial:

• Preparing Laravel project
• Install and Run the Reverb Server
• Configure Laravel Broadcasting
• Configure Front-end Client
• Export Back-End: Job, Event, Controller
• Export Front-end JS: Button and Status Updates

So, are you ready? Let's dive in!

Preparing Laravel Project

For this tutorial, we will create a fresh Laravel project using the laravel new command. Here are our settings:

We will use Laravel Breeze for our Authentication and UI. Our database will be SQLite, as that is the default for Laravel 11.

Seed Users Demo Data

We need to add our Admin user and some random users by modifying database/seeders/DatabaseSeeder.php:

database/seeders/DatabaseSeeder.php:

class DatabaseSeeder extends Seeder
{
    public function run()
    {
        User::factory()->create([
            'name' => 'Test User',
            'email' => 'admin@admin.com',
        ]);
 
        User::factory()
            ->count(1000)
            ->create();
    }
}

Then, we can run the migration and seed the database:

php artisan migrate:fresh --seed

Setup Front-end

Before we dive into the Reverb things, let's set up our base front end. This will include:

• New route
• Controller
• View (users list)

Let's do this quickly:

Controller

app/Http/Controllers/UsersController.php

namespace App\Http\Controllers;
 
use App\Models\User;
 
class UsersController extends Controller
{
    public function __invoke()
    {
        $users = User::query()
            ->paginate();
 
        return view('users.index', compact('users'));
    }
}

View

resources/views/users/index.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Users List') }}
        </h2>
    </x-slot>
 
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-90 0 dark:text-gray-100">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-800">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Name
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Email
                            </th>
                        </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach ($users as $user)
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                        {{ $user->name }}
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500 dark:text-gray-400">
                                        {{ $user->email }}
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    <div class="mt-4">
                        {{ $users->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

Route

routes/web.php

use App\Http\Controllers\UsersController;
 
// ...
 
 
Route::middleware('auth')->group(function () {
    // ...
 
    Route::get('users', UsersController::class)->name('users.index');
});

Then, we need to run NPM to compile our assets:

npm run build

Now, if you navigate to <APP_URL>/users, you should see the default table of users with our seeded data:

Note: you can log in with admin@admin.com / password.

Ok, preparation is done; now let's build a button to export users with Reverb.

Install and Run the Reverb

To install Reverb, we have to call this command:

php artisan install:broadcasting

This will ask us if...