Keep track of disconnected users on Laravel with Reverb.io

Keep track of disconnected users on Laravel with Reverb.io

To keep track of disconnected users on Laravel with Reverb.io, you can utilize WebSockets and Reverb.io's Push Notifications feature. WebSockets allow for bi-directional communication between the client and the server, making it possible to send real-time updates to clients when certain events occur. Reverb.io's Push Notifications can be used to send these updates to clients even if they have disconnected from the WebSocket connection.

Here's a step-by-step guide on how to implement this feature:

1. Install Laravel Echo and Reverb.io:

First, you need to install Laravel Echo, which is a library for Laravel that simplifies the process of setting up WebSockets and Event Broadcasting. You also need to sign up for a Reverb.io account to get your API key.

To install Laravel Echo, run the following command in your terminal:

composer require laravel/echo

Next, create a new file broadcasting.php in the config directory and add the following code to configure Laravel Echo:

return [
    'broadcasters' => [
        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'encrypted' => false,
            ],
        ],

        'reverb' => [
            'driver' => 'reverb',
            'key' => env('REVERB_API_KEY'),
        ],
    ],
];

Replace REVERB_API_KEY with your Reverb.io API key.

2. Create a new event:

Create a new event file UserDisconnected.php in the app/Events directory:

namespace App\Events;

use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use App\User;

class UserDisconnected
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $user;

    /**
     * Create a new event instance.
     *
     * @param  \App\User  $user
     * @return void
     */
    public function __construct(User $user)
    {
        $this->user = $user;
    }
}

3. Create a new listener:

Create a new listener file UserDisconnectedListener.php in the app/Listeners directory:

namespace App\Listeners;

use App\Events\UserDisconnected;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Support\Facades\Broadcast;

class UserDisconnectedListener
{
    use InteractsWithQueue, ShouldQueue;

    /**
     * Handle the event.
     *
     * @param  \App\Events\UserDisconnected  $event
     * @return void
     */
    public function handle(UserDisconnected $event)
    {
        Broadcast::channel('user.disconnected.'.$event->user->id, [
            'user' => $event->user,
        ]);

        Broadcast::to($event->user)->channel('user.disconnected.'.$event->user->id)->push('disconnected');
    }
}

4. Register the event and listener:

Register the event and listener in the AppServiceProvider.php file:

namespace App\Providers;

use Illuminate\Support\Facades\Broadcast;
use Illuminate\Support\ServiceProvider;
use App\Events\UserDisconnected;
use App\Listeners\UserDisconnectedListener;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Broadcast::route('user.disconnected.{id}', UserDisconnected::class);

        Broadcast::channel('user.disconnected.{id}', UserDisconnectedListener::class);
    }
}

5. Handle disconnected events:

In your JavaScript code, handle the disconnected event and update the UI accordingly:

import Echo from "laravel-echo";

window.Echo = new Echo({
    broadcaster: "pusher",
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true,
});

Echo.channel('user.disconnected.' + userId)
    .listen('Disconnected', (e) => {
        // Update UI when user disconnects
        console.log('User ' + e.user.name + ' disconnected.');
    });

6. Disconnect users:

To disconnect a user, you can call the disconnect method on the Echo instance:

window.Echo.channel('user.disconnected.' + userId)
    .disconnect();

With this implementation, you can keep track of disconnected users on Laravel with Reverb.io and send real-time updates to clients even if they have disconnected from the WebSocket connection.