How to use Soketi with Laravel

PART 1
PART 2
PART 3

On today's post we will see how to use Soketi as a WebSockets server with Laravel. this post will be using all things locally and in the Pt.2 we will deploy Soketi on EC2.

Prerequisites:

• A Laravel 9 project.
• Node js
• Python 3.x
• GIT
• The gcc compiler and the dependencies for build

Make sure to have all above tools installed on your machine before move on.

NOTE: there are several ways to install Soketi check the official docs

NOTE2: if you are using Mac OS like in my case use brew to install all three above packages:

brew install gcc
...

Step 1: Install & Running Soketi

Now install Soketi globally on your machine by running:

npm install -g @soketi/soketi

After the installation is finished run:

soketi start

You should getting something like this:

Step 2: Install Laravel Related Packages(client, server)

To use pusher driver with Laravel you should install the Pusher Channels PHP SDK using the Composer package manager:

composer require pusher/pusher-php-server

To receive the event to client side you should install these two packages throw NPM:

npm install --save-dev laravel-echo pusher-js

Last thing install laravel/breeze:

composer require laravel/breeze

php artisan breeze:install

Step 3: Configure Soketi with Laravel

First open config/broadcasting.php file and change the pusher driver to the following:

'connections' => [

    // ...

    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY', 'app-key'),
        'secret' => env('PUSHER_APP_SECRET', 'app-secret'),
        'app_id' => env('PUSHER_APP_ID', 'app-id'),
        'options' => [
            'host' => env('PUSHER_HOST', '127.0.0.1'),
            'port' => env('PUSHER_PORT', 6001),
            'scheme' => env('PUSHER_SCHEME', 'http'),
            'encrypted' => true,
            'useTLS' => env('PUSHER_SCHEME') === 'https',
        ],
    ],
],

We need to update our .env file with the new configuration details:

PUSHER_APP_KEY=app-key
PUSHER_APP_ID=app-id
PUSHER_APP_SECRET=app-secret
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"

Also in the .env change BROADCAST_DRIVER to pusher

Now go to resources/js/bootstrap.js file and uncomment the last lines:

import Echo from "laravel-echo";

import Pusher from "pusher-js";
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: "pusher",
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost:
        import.meta.env.VITE_PUSHER_HOST ??
        `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? "https") === "https",
    enabledTransports: ["ws", "wss"],
});

Step 4: Use Soketi with Laravel

Create a new event php artisan make:event OrderStatusUpdated

Open it and change make it like this:

class OrderStatusUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function __construct()
    {
    }

    public function broadcastOn()
    {
        return new Channel('orders');
    }
}

Then in resources/js/bootstrap.js at the end add this code:

window.Echo.channel("orders").listen("OrderStatusUpdated", (e) => {
    console.log(e);
});

It's simple event listener to listen OrderStatusUpdated once it's fire.

Now go to web.php and create a new route for running the event

Route::get('/fire', function () {
    OrderStatusUpdated::dispatch();

    return 'Event has been sent!';
});

Step 5: Testing

Open two tabs in your browser:

First soketi.test/dashboard and open the console to just see the event.

Second Run the event by visiting soketi.test/fire

Once you hit the second URL you should see the event in the first tab in REAL-TIME WAY :)

========== The End =============

Another useful resources:

1- Laracast course that explains in details about the Broadcasting events in Laravel.

2- Always check the official docs of Soketi for more details.

See you in PT.2 :)

Comments

[kimpoy010]

for the .env pusher credentials, can I use any string there?

[Rabeea Ali]

No for local purpose use these:

PUSHER_APP_KEY=app-key
PUSHER_APP_ID=app-id
PUSHER_APP_SECRET=app-secret
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001