Comunicazione in tempo reale con laravel broadcasting e reverb

La comunicazione in tempo reale, nelle applicazioni web, si riferisce alla capacità degli utenti di scambiare informazioni istantaneamente o con un ritardo minimo.

Alcuni esempi di comunicazione in tempo reale sono: le chat live, collaborazione in tempo reale, notifiche e aggiornamenti che si verificano senza aggiornare manualmente la pagina…

Tecnologie come WebSocket, server-sent events (SSE) e polling lunghi sono comunemente utilizzate per abilitare la comunicazione in tempo reale, consentendo alle applicazioni web di offrire esperienze interattive e dinamiche agli utenti.

7 minuti

Ti hanno chiesto di sviluppare una chat live per il sito di ecommerce, e non sai quale tecnologia usare. Alcuni tuoi colleghi ti hanno parlato di alcune tecnologie come websocket, ma non hai la benché minima idea di come implementare un servizio di broadcasting.

Sei capitato nel posto giusto al momento giusto: di seguito, infatti, ti fornirò tutte le istruzioni necessarie per avvalerti dei vantaggi del laravel broadcasting, e laravel reverb per la gestione della comunicazione in tempo reale, e quindi implementare la chat live. Non temere, non si tratta di operazioni complesse, l’importante è avere le idee chiare su come organizzare e strutturare il tutto: apprenderai quanto ti serve per iniziare proprio nel corso di questo articolo.

Dunque, cosa ne pensi di metterti subito in azione? Siediti comodo, ritagliati qualche minuto di tempo per te e leggi tutto quanto ho da dirti su laravel broadcasting e laravel reverb: sono sicuro che, al termine della guida, sarai perfettamente in grado di fare un gran bel lavoro. Detto ciò, non mi resta che augurarti buona lettura e buon lavoro!

Laravel Reverb è uno strumento di comunicazione in tempo reale per le applicazioni Laravel. Consente connessioni WebSocket tra client e server, consentendo aggiornamenti e interazioni in tempo reale senza aggiornamenti di pagina costanti. Reverb è spesso utilizzato in applicazioni che richiedono aggiornamenti in tempo reale o funzionalità di messaggistica istantanea, fornendo un modo fluido ed efficiente per gestire lo scambio di dati in tempo reale.

Che cos’è Laravel Reverb

Laravel Reverb è un concetto che combina Laravel, un popolare framework PHP noto per la sua sintassi elegante e le sue potenti funzionalità, con Reverb, un server WebSocket progettato per la comunicazione in tempo reale nelle applicazioni web.

In questo contesto, Reverb è un server WebSocket di prima parte creato esplicitamente per le applicazioni Laravel. Facilita la comunicazione in tempo reale tra il client (browser) e il lato server, abilitando funzionalità come aggiornamenti live, messaggistica istantanea, notifiche e funzionalità collaborative senza aggiornamenti di pagina costanti.

Integrando Laravel con Reverb, gli sviluppatori possono creare applicazioni web interattive e reattive che offrono agli utenti un’esperienza fluida e dinamica.

Caratteristiche principali di Laravel Reverb

· Aggiornamenti in tempo reale: aggiorna istantaneamente le interfacce client con nuovi dati senza ricaricare la pagina.

· Live Chat: consente la messaggistica e la comunicazione in tempo reale tra gli utenti.

· Notifiche: invia notifiche push ai clienti in tempo reale per aggiornamenti tempestivi.

· Modifica collaborativa: facilita la modifica simultanea di documenti o progetti condivisi.

· Scalabilità: gestisce in modo efficiente un gran numero di connessioni simultanee.

· Personalizzazione: possibilità di adattare le funzionalità in tempo reale alle esigenze specifiche dell’applicazione.

Principali vantaggi dell’utilizzo di Laravel Reverb

Laravel Reverb è un punto di svolta per gli sviluppatori che cercano di creare applicazioni web dinamiche e reattive con capacità di comunicazione in tempo reale. Ecco alcuni dei principali vantaggi offerti da Laravel Reverb:

Prestazioni rapide: scopri una velocità eccezionale con l’architettura ottimizzata di Laravel Reverb, che garantisce un flusso di dati fluido e interfacce utente reattive anche sotto carichi pesanti.

Integrazione senza sforzo: integra perfettamente Laravel Reverb con le funzionalità di broadcasting di Laravel, distribuendo e sfruttando senza sforzo Laravel Forge per semplificare le sottoscrizioni ai canali e la gestione degli eventi.

Scalabilità semplificata: ridimensiona la tua applicazione senza sforzo con il supporto integrato di Laravel Reverb per il ridimensionamento orizzontale, gestendo in modo efficiente connessioni e canali su più server per soddisfare le crescenti richieste di traffico.

Compatibilità con il protocollo Pusher: sfrutta la potenza del protocollo Laravel Pusher per WebSocket con Laravel Reverb, integrandosi perfettamente con Laravel Broadcasting ed Echo per un’implementazione rapida ed efficiente della comunicazione in tempo reale.

Padronanza del monitoraggio: sfrutta il supporto integrato di Pulse in Laravel Reverb per il monitoraggio in tempo reale, garantendo il regolare funzionamento e l’integrità del sistema per esperienze utente senza interruzioni.

Installazione broadcasting laravel

Se hai necessità di aggiungere capacità di trasmissione al tuo nuovo progetto, allora questo è il modo in cui dovrebbe essere fatto. Se stai lavorando su un progetto esistente, esegui i seguenti comandi:

composer install
php artisan broadcast:install

Questo comando crea le configurazioni necessarie e i file richiesti:

Se guardi nella cartella resources/js, troverai un file appena generato echo.js, che gestisce le connessioni WebSocket.

File di configurazione Broadcasting Laravel: config/broadcasting.php

File di configurazione di reverb : config/reverb.php

Configurare il driver del Broadcasting

Per configurare il driver di Brodcast devi impostare i parametri nel file .env di Laravel, in modo tale che il driver di broadcast sia su Reverb. Quindi seguito un esempio:

BROADCAST_DRIVER=reverb
REVERB_APP_ID=your_app_id
REVERB_APP_KEY=your_app_key
REVERB_APP_SECRET=your_app_secret
REVERB_HOST="yourhost.test"
REVERB_PORT=8080
REVERB_SCHEME=https

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

Definire i Broadcast Channels

Prima di creare eventi, dobbiamo definire i canali su cui saranno trasmessi gli eventi. Per far questo dobbiamo aprire il file routes/channels.php e aggiungere le definizioni dei canali che vogliamo utilizzare. I canali possono essere privati e pubblici:

• Esempio di canale privato:

Broadcast::channel('App.User.{id}', function ($user, $id) {
    return $user->id === $id;
});

• Esempio di canale pubblico:

Se vuoi trasmettere su un canale pubblico, definisci semplicemente un percorso pubblico senza alcun controllo di autenticazione:

Broadcast::channel('public-updates', function () {
    return true;
});

Creare la classe Evento

Per inviare i messaggi in tempo reale, è necessario definire l’evento che verrà trasmetto. Per farlo è necessario eseguire il seguente comando artisan:

php artisan make:event UserEvent

La classe UserEvent generata, implementa l’interfaccia ShouldBroadcast e aggiungi le importazioni necessarie per trasmettere l’evento. Ecco un esempio di implementazione:

Esempio di canale privato

namespace App\Events;

use App\Models\User;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

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

    /**
     * Create a new event instance.
     */
    public function __construct(public $downloadURL, public User $user)
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new PrivateChannel("App.User." . $this->user->id),
        ];
    }

    public function broadcastWith(): array
    {
        return array(
            'username' => __('app.welcome_message', ['username' => $this->user->name]),
            'message' => __('events.download_hawb_ready'),
        );
    }

    public function broadcastAs(): string
    {
        return 'user.notification';
    }

}

Esempio di canale pubblico:

namespace App\Events;

use App\Models\User;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

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

    /**
     * Create a new event instance.
     */
    public function __construct(public $downloadURL)
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new Channel("public-updates"),
        ];
    }

    public function broadcastWith(): array
    {
        return array(
            'message' => __('events.download_hawb_ready'),
        );
    }

    public function broadcastAs(): string
    {
        return 'public.notification';
    }

}

Eventi di attivazione

Per trasmettere un evento, usa l’ broadcast()helper nel tuo controller. Ecco come puoi inviare UserEvent:

use App\Events\UserEvent;

 broadcast(new UserEvent($data));

Impostare l’ascolto frontend

Ora, devi ascoltare gli eventi trasmessi sul frontend. Puoi usare Laravel Echo con Reverb WebSocket per farlo. Apri il file resources/js/echo.js e aggiungi il seguente listener:

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

document.addEventListener('DOMContentLoaded', function () {
    const userID = window.userID;

    window.Echo.private(`App.User.${userID}`)
        .listen('.user.notification', (response) => {
            console.log("Event received:", response);
            showNotification(response);
        });
});

Compilare gli Assets

Dopo aver impostato il tuo event listener, devi compilare le risorse frontend per assicurarti che le modifiche vengano applicate. Esegui il seguente comando:

npm run dev

Questo comando ti consente di compilare gli assets, cioè i file JavaScript, inclusi gli Echo listeners.

Avviare la Queue Listener

Il laravel broadcasting funziona in modo asincrono, quindi è necessario eseguire il queue listener per elaborare gli eventi in coda. Per avviare la queue è necessario eseguire il comando:

php artisan queue:listen

Questo comando avvia l’elaborazione degli eventi in tempo reale e garantisce il corretto funzionamento della trasmissione.

Verifica della configurazione del canale

Per assicurarti che i tuoi canali siano impostati correttamente, verifica la configurazione in routes/channels.php. Inoltre, esegui il seguente comando per elencare tutti i canali registrati:

php artisan channel:list

Questo comando visualizzerà tutti i canali broadcast configurati nella tua applicazione.

Avviare reverb laravel

Successivamente, devi avviare il server Reverb WebSocket. Esegui il comando seguente, assicurandoti di impostare il parametro --hostname scrivendo il tuo dominio o ambiente locale:

php artisan reverb:start --host="0.0.0.0" --port=8080 --hostname="yourhost.test" --debug

Questo avvia il server Reverb sulla porta specificata.

Configurazione del routing dell’applicazione

Assicurati che il routing dell’applicazione sia configurato correttamente per includere i canali di trasmissione. Puoi configurare i percorsi come segue:

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__ . '/../routes/web.php',
        commands: __DIR__ . '/../routes/console.php',
        channels: __DIR__ . '/../routes/channels.php',
        health: '/up',
    );

Seguendo questi passaggi, puoi impostare con successo la trasmissione con Reverb in Laravel 11. Dopo aver impostato tutto correttamente, sarai in grado di trasmettere messaggi in tempo reale, assicurando aggiornamenti senza interruzioni in tutta la tua applicazione. Non dimenticare di controllare la tua configurazione e di usare il comando php artisan channel:list per verificare la configurazione del tuo canale.