WebSockets in Laravel with Soketi: Real-Time Updates Example

Notice: we have a newer version of the same tutorial with Laravel 11 and Reverb: Laravel Reverb Demo: Real-Time Notification on Completed Task

Some Laravel tasks are running in the background and you need to 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 Soketi server.

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

In this tutorial, I will show you how to implement it, step-by-step, with one of the options for WebSockets, called Soketi. There are other alternatives, but Soketi server solution has lately become the most recommended in Laravel community, as the most reliable.

What we'll cover in this tutorial:

• Preparing Laravel project
• Install and Run the Soketi 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 are going to use Laravel Daily pre-made project for such demonstration purposes https://github.com/LaravelDaily/Laravel-Breeze-Pages-Skeleton, which gives us Laravel Breeze Auth with a simple page of the list of users.

You can also use the default Laravel installation, but it might need a bit more setup in the beginning.

Project Setup

Clone the repo:

1git clone https://github.com/LaravelDaily/Laravel-Breeze-Pages-Skeleton tutorial-soketi-export-pdf

Run composer to install project dependencies:

1composer install

Copy .env.example to .env:

1cp .env.example .env

Generate your app key:

1php artisan key:generate

To be able to download exported files, we also going to need symlink to the public folder:

1php artisan storage:link

After that, update the .env file with your database credentials:

1APP_URL=<your website url>
2DB_DATABASE=<your db name>
3DB_USERNAME=<your db username>
4DB_PASSWORD=<your db password>

And migrate your database:

1php artisan migrate:fresh --seed

Seed Users Demo Data

By default there will be 10 users seeded, let's add some more by modifying database/seeders/UserSeeder.php and changing it to 100 users. The file should look like this:

database/seeders/UserSeeder.php:

1class UserSeeder extends Seeder
2{
3    public function run()
4    {
5        User::factory(100)->create();
6    }
7}

And re-seed our database again:

1php artisan migrate:fresh --seed

Setup Front-end

Install npm dependencies and compile the assets for our project:

1npm install
2npm run dev

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

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

Install and Run the Soketi Server

For the WebSockets server we're going to use Soketi, it is a simple and fast WebSockets server.

Node.js LTS (14.x, 16.x, 18.x) is required due to uWebSockets.js build limitations.

Soketi may be easily installed via the NPM CLI:

When using -g flag you need to be root (or use sudo) to be able to install the Soketi server globally.

1npm install -g @soketi/soketi

If installation fails with error code 128 as shown, delete the /root/.npm folder and try again.

1npm ERR! code 128
2npm ERR! An unknown git error occurred
3npm ERR! command git --no-replace-objects clone -b v20.10.0 ssh://git@github.com/uNetworking/uWebSockets.js.git /root/.npm/_cacache/tmp/git-cloneOvhFm4 --recurse-submodules --depth=1
4npm ERR! fatal: could not create leading directories of '/root/.npm/_cacache/tmp/git-cloneOvhFm4': Permission denied

After installation, a Soketi server using the default configuration may be started using...