Laravel WebSockets dashboard

Ciao e benvenuto alla quarta lezione della nostra guida su Laravel e WebSocket! Oggi ci concentreremo su un aspetto affascinante e potente di Laravel: la WebSockets dashboard. Questo strumento ti permetterà di monitorare e gestire in tempo reale le connessioni WebSockets. Portando la tua applicazione ad un livello superiore di interattività e reattività.

Nel mondo dello sviluppo web moderno, la comunicazione in tempo reale sta diventando sempre più essenziale. Che tu stia costruendo una chat, un sistema di notifiche in tempo reale o un'applicazione di monitoraggio live, WebSockets rappresentano una soluzione ideale per mantenere una connessione aperta e bidirezionale tra il server e il client. Tuttavia, gestire e monitorare queste connessioni può diventare complicato. Ed è qui che entra in gioco la WebSockets dashboard di Laravel.

Il nostro progetto Laravel

In questa lezione esploreremo insieme come configurare e utilizzare la dashboard di Laravel WebSockets. Partiremo dalle basi, impostando l'ambiente di sviluppo, per poi addentrarci nelle funzionalità offerte dalla dashboard. Vedremo come monitorare le connessioni attive, analizzare i messaggi in transito e configurare alert personalizzati per tenere sotto controllo il traffico e le performance di un'applicazione.

Preparati a scoprire un modo completamente nuovo di gestire le tue connessioni WebSockets. Quindi, mettiti comodo e cominciamo questa nuova avventura nel mondo dei WebSockets con Laravel!

Configurare la Dashboard

Apri il file config\websockets.php e vai su:

...
'path' => 'laravel-websockets',
...

Questo è il percorso della dashboard del Websockets. Difatti se avviamo il server e navighiamo su http://localhost:8000/laravel-websockets abbiamo:

Al momento non funziona in quanto non abbiamo ancora configurato la connessione ai servizi Websocket. Se apri la console degli sviluppatori (tasto F12), vai su "Network" e provi a cliccare su "Connect" ti restituirà un errore come quello mostrato di seguito:

In pratica il sistema ci sta dicendo che lo stato corrente del canale è disconnesso. Per cui riapriamo il file websockets.php e modifichiamo come di seguito:

return [
/*
* Set a custom dashboard configuration
*/
'dashboard' => [
'port' => env('LARAVEL_WEBSOCKETS_PORT', 6001),
'host' => env('LARAVEL_WEBSOCKETS_HOST')
],

Come puoi notare ho aggiunto host a dashboard dove:

• 'host' è la chiave della configurazione. Indica che stiamo definendo l'host per il nostro server WebSockets.
• env('LARAVEL_WEBSOCKETS_HOST'): qui stiamo utilizzando la funzione env di Laravel per recuperare il valore della variabile di ambiente LARAVEL_WEBSOCKETS_HOST.

Le variabili d'ambiente di Laravel

env permette di accedere alle variabili di ambiente definite nel file .env dell'applicazione. In questo file conserviamo le configurazioni sensibili o che possono variare tra i diversi ambienti (sviluppo, testing, produzione). Utilizzare env consente di rendere il codice più flessibile e sicuro.

Se ari il file .env avrai una riga come questa:

LARAVEL_WEBSOCKETS_HOST=127.0.0.1

Quando il codice env('LARAVEL_WEBSOCKETS_HOST') viene eseguito, Laravel cercherà questa variabile nel file .env e utilizzerà il valore associato (in questo caso 127.0.0.1). Ciò significa che l'host per il server WebSockets sarà impostato su 127.0.0.1.

Se in futuro dovrai cambiare l'host, basterà modificare il valore nel file .env senza dover alterare il codice sorgente. Ad esempio, per passare all'ambiente di produzione potresti semplicemente aggiornare la variabile di ambiente così:

LARAVEL_WEBSOCKETS_HOST=prod.example.com

Sotto apps aggiungi:

'apps' => [
[
'id' => env('PUSHER_APP_ID'),
'name' => env('APP_NAME'),
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'path' => env('PUSHER_APP_PATH'),
'capacity' => null,
'enable_client_messages' => false,
'enable_statistics' => true,
'encrypted' => false
],
],
,

Ora "killa" il server con ctrl+c e riavvialo eseguendo da terminale

php artisan websockets:serve

Se tutto dovesse procedere per il verso giusto avrai:

Creare un evento

Naviga su http://localhost:8000/laravel-websockets e crea un evento come di seguito:

Nel primo e nel secondo campo inserisci una stringa a piacere, nell'ultimo {}. Quindi clicca su Send Event e tieni la console degli sviluppatori su "network":

Stiamo ricevendo un errore relativo alla connessione del Pusher. In pratica il nostro file di configurazione non viene letto:

Torniamo quindi al codice ed apriamo il file config/broadcasting:

...
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
'host' => env('LARAVEL_WEBSOCKETS_HOST'),
//'host' => env('PUSHER_HOST') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
'port' => env('LARAVEL_WEBSOCKETS_PORT'),
'cluster' => env('PUSHER_APP_CLUSTER'),
'scheme' => env('PUSHER_SCHEME', 'https'),
'encrypted' => true,
'useTLS' => false, /*env('PUSHER_SCHEME', 'https') === 'https',*/
'scheme' => 'http',
'curl_options' => [
CURLOPT_SSL_VERIFYHOST => 0,
CURLOPT_SSL_VERIFYPEER => 0,
]
],
'client_options' => [
// Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
],
],
...

In pratica abbiamo modificato

'cluster' => env('LARAVEL_WEBSOCKETS_HOST'),

in

'host' => env('LARAVEL_WEBSOCKETS_HOST'),

Ora prova a creare un altro evento:

Hai creato il tuo primo evento con successo!

Crearere un'API di connessione WebSocket

Fino ad ora abbiamo configurato il server WebSockets e verificato il suo corretto funzionamento. Il prossimo passo consiste nel creare un'API di connessione che ci permetta di interagire con il server WebSockets. Creiamo quindi un controller e chiamiamolo SocketsController:

php artisan make:controller SocketsController

Modifichiamo come di seguito:

<?php
declare (strict_types=1);
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SocketsController extends Controller
 {
 public function connection(Request $request){
 dd("good");
 }
}

Per ora proviamo solo l'end point, apriamo il file Routes/api.php ed aggiungiamo la rotta:

Route::post("/sockets/connect",[SocketsController::class,'connection'])->name('sockets.connect');

Proviamolo con Postman quindi apriamolo e digitiamo:

Nella barra degli indirizzi abbiamo aggiunto http://127.0.0.1:8000/api/s1/sockets/connect con chiamata tipo POST dove:

• api è relativo al tipo di rotta creata;
• s1 indica "socket prima versione" (potevo chiamarlo in qualsiasi modo, non è obbligatorio ma consente di avere altre API ordinate e diversificate;
• sockets/connect è il percorso della rotta.

Se osservi la preview come da immagine questa restituisce correttamente la stringa inserita nel dd. Anche se con un errore in quanto il sistema si aspetta un json.

Riapriamo il controller SocketsController ed implementiamo il metodo connect:

validAuthenticationResponse($request,[]);
}
}

Di seguito la spiegazione del codice:

<?php
declare (strict_types=1);
namespace App\Http\Controllers;

Qui stiamo dichiarando il nostro file PHP e imponendo l'uso di tipi strict. Poi definiamo il namespace del controller che è App\Http\Controllers.

use Illuminate\Broadcasting\Broadcasters\PusherBroadcaster;
use Illuminate\Http\Request;
use Pusher\Pusher;

Importazione delle classi

In questo caso stiamo importando le classi:

• PusherBroadcaster dalla libreria di broadcasting di Laravel.
• Request dalla libreria HTTP di Laravel per gestire le richieste.
• Pusher dalla libreria Pusher per interagire con il servizio omonimo.

class SocketsController extends Controller
{
public function connect(Request $request){
$broadcaster = new PusherBroadcaster(
new Pusher(
env("PUSHER_APP_KEY"),
env("PUSHER_APP_SECRET"),
env("PUSHER_APP_ID")
)
);
return $broadcaster->validAuthenticationResponse($request,[]);
}
}

• Definizione della Classe: SocketsController estende la classe base Controller di Laravel.
• Metodo connect: riceve un oggetto Request come parametro.

$broadcaster = new PusherBroadcaster(
new Pusher(
env("PUSHER_APP_KEY"),
env("PUSHER_APP_SECRET"),
env("PUSHER_APP_ID")
)
);

Stiamo creando ora una nuova istanza di PusherBroadcaster, passando un'istanza di Pusher configurata con le credenziali prese dalle variabili d'ambiente (.env).

return $broadcaster->validAuthenticationResponse($request,[]);

Infine, utilizziamo il metodo validAuthenticationResponse per generare una risposta di autenticazione valida per il client che tenta di connettersi al nostro WebSocket. Questo metodo prende la richiesta originale e un array opzionale di dati extra da includere nella risposta.

In sintesi, il controller gestisce la logica di connessione ai WebSockets tramite Pusher, utilizzando Laravel come framework backend. Quando un client tenta di connettersi, viene autenticato utilizzando le credenziali configurate e riceve una risposta che consente la connessione.

Conclusione

Nella quarta lezione della guida su Laravel e WebSockets ci siamo concentrati sulla configurazione e l'utilizzo della dashboard di Laravel WebSockets. Abbiamo iniziato discutendo l'importanza della comunicazione in tempo reale nelle applicazioni web, evidenziando come la dashboard possa essere uno strumento per gestire e monitorare connessioni in tempo reale.

Abbiamo poi aperto e modificato il file config/websockets.php per impostare il percorso della dashboard e configurare le opzioni, come host e porta. Questo ci ha permesso di preparare l'ambiente e gestire connessioni WebSockets. Successivamente abbiamo aggiunto le variabili LARAVEL_WEBSOCKETS_HOST e LARAVEL_WEBSOCKETS_PORT in .env, garantendo così una configurazione adattabile agli ambienti di sviluppo, testing e produzione.

Una volta completata la configurazione, abbiamo avviato il server WebSockets utilizzando php artisan websockets:serve. Questo ci ha permesso di testare il funzionamento della dashboard di Laravel WebSockets. Abbiamo quindi utilizzato la dashboard per creare e inviare un evento. Verificando che la connessione funzionasse come previsto.

In seguito ci siamo dedicati alla creazione di un'API di connessione WebSocket. Abbiamo creato in controller SocketsController e in esso abbiamo implementato il metodo connect che autentica le connessioni utilizzando le credenziali Pusher. Abbiamo poi testato l'API di connessione utilizzando Postman, assicurandoci che il sistema rispondesse alla richiesta di connessione.