Benvenuto alla sesta lezione della nostra guida su Laravel e WebSocket! Dopo aver esplorato in profondità la comunicazione dispositivo-server ci concentreremo su come rendere ancora più interattiva la tua applicazione web.
Abbiamo visto come i dispositivi client possono stabilire connessioni WebSocket con il server. Mantenendo una comunicazione bidirezionale aperta e sicura. Abbiamo anche implementato un esempio pratico di invio e ricezione di messaggi in tempo reale, utilizzando Vue.js per creare un'interfaccia utente dinamica.
Ora andremo oltre, esplorando come gestire i thread di chat e le notifiche push in tempo reale. Queste funzionalità sono essenziali per migliorare l'interattività delle applicazioni. Permettendo agli utenti di comunicare in modo fluido e immediato.
Modifiche al codice di Vue.js per gestire WebSocket
Nella sezione precedente abbiamo implementato una semplice interfaccia Vue.js per gestire la connessione WebSocket e inviare messaggi. Ora, apri il file chat.blade.php ed apporta le seguenti modifiche allo script:
<script>
new Vue({
el: "#app",
data: {
connected: false,
name: null,
formError: false,
incomingMessages: [{
message: "Your message",
name: "Lucio",
"time": 2012
}
],
message: null
},
mounted() {
},
methods: {
connect() {
this.connected = true;
},
disconnect() {
this.connected = false;
},
sendMessage() {
this.formError = true;
},
}
});
</script>Le modifiche al codice
Abbiamo introdotto alcune importanti modifiche per migliorare la gestione delle connessioni WebSocket. Innanzitutto è stato aggiunto il metodo mounted che è un hook del ciclo di vita di Vue.js eseguito dopo che l'istanza del componente è stata montata. Attualmente, il metodo è vuoto ma può essere utilizzato per inizializzare il WebSocket o eseguire altre operazioni necessarie quando il componente è pronto.
Nei metodi connect e disconnect, abbiamo rimosso i messaggi di debug (console.log) e i commenti che suggerivano di aggiungere la logica WebSocket. Questi metodi ora impostano lo stato connected su true o false, semplificando il codice e preparando l'integrazione della logica di connessione e disconnessione WebSocket.
Abbiamo aggiunto il metodo sendMessage che attualmente imposta formError su true. Questo metodo sarà utilizzato per inviare messaggi tramite WebSocket. L'impostazione di formError su true è temporanea e verrà sostituita con la logica di invio del messaggio.
Infine, abbiamo corretto un errore di sintassi nel metodo connect del codice originale, dove la proprietà message veniva ridefinita in modo errato.
Con queste modifiche, il codice è più strutturato e pronto per l'implementazione delle funzionalità WebSocket avanzate. I prossimi passaggi includono l'aggiunta della logica WebSocket nei metodi connect e disconnect, l'implementazione dell'invio di messaggi nel metodo sendMessage e l'inizializzazione della connessione WebSocket nel metodo mounted.
Ora collega il metodo al click del pulsante Send per l'invio dell'evento:
<div class="col-lg-2">
<button type="button" class="btn btn-small btn-primary w-100">Send Event</button>
</div>Invio e ricezione dei messaggi
Apri la view chat.blade.php e modifica come di seguito:
</div>
<div class="col-12 bg-light pt-2 pb-2 mt-3">
<p class="p-0 m-0 ps-2 pe-2">
({{ message.time }}) <b>{{ message.name }}</b>
{{ message.message }}
</p>
</div>
<h4 class="mt-4">Message</h4>
<div class="row mt-2">
<div class="col-12 text-white">
<div class="bg-danger p-2 mb-2">
<p class="p-0 m-0">
<b>Error:</b> Invalid message
</p>
</div>
</div>
<div class="col-12">
<div class="form-group">
<textarea class="form-control" rows="3">
</textarea>
</div>
</div>
</div>
<div class="row text-right mt-2">
<div class="col-lg-10">
</div>
<div class="col-lg-2">
<button type="button" class="btn btn-small btn-primary w-100">Send Event</button>
</div>
</div>
</div>
>Ho aggiunto un titolo alla sezione per renderla più chiara e strutturata. Ora, quando sono connesso, appare la sezione di chat con il titolo "Chat Section". Questo rende evidente che posso interagire con la chat.
La condizione v-if="connected === true" mostra il contenuto della sezione solo quando sono connesso. Questo include l'area dei messaggi ricevuti, l'area per l'invio di nuovi messaggi e il messaggio di errore. L'area dei messaggi ricevuti utilizza un ciclo v-for per iterare attraverso l'array incomingMessages. Mostrando ogni messaggio con il relativo timestamp, il nome dell'autore e il contenuto.
Ho inserito poi una textarea per l'inserimento dei nuovi messaggi, collegata tramite v-model alla variabile message. Ho aggiunto anche un puldante per inviare i messaggi che chiama il metodo sendMessage() al click. Infine, ho configurato la visualizzazione di un messaggio di errore solo se formError è impostato su true. Per fornire feedback in caso di problemi con l'invio del messaggio.
Test e connessione
Proviamo quanto fatto fino ad ora:
Questa è invece la fase di connessione:
Creare il metodo per la connessione
Per realizzare il metodo per la connessione avremo bisogno di alcune variabili che ci consentiranno di connetterci ai web Socket, quindi li passeremo alla vista. Apri il file web.php e modifica come di seguito:
env("LARAVEL_WEBSOCKETS_PORT"),
"host" => env("LARAVEL_WEBSOCKETS_HOST"),
"authEndpoint" => '/api/sockets/connect',
"logChannel" => DashboardLogger::LOG_CHANNEL_PREFIX,
"apps" => $appProvider->all()
]);
;Innanzitutto definito la variabile port utilizzando il valore dalla variabile d'ambiente LARAVEL_WEBSOCKETS_PORT. Essa specifica la porta su cui i WebSocket dell'applicazione sono configurati per ricevere connessioni da dispositivi client.
Successivamente ho impostato la variabile host utilizzando il valore dalla variabile d'ambiente LARAVEL_WEBSOCKETS_HOST che specifica l'indirizzo host su cui i WebSocket sono configurati. Questo è cruciale affinché i client possano connettersi al server WebSocket.
Ho definito l'endpoint authEndpoint come '/api/sockets/connect' che gestisce l'autenticazione dei dispositivi con il server WebSocket. Questo endpoint garantisce che solo i dispositivi autorizzati possano accedere e interagire con i WebSocket dell'applicazione.
Per il canale di log, ho utilizzato DashboardLogger::LOG_CHANNEL_PREFIX, che rappresenta il prefisso utilizzato per il canale di log dei WebSocket nella dashboard. Questo aiuta a registrare e monitorare eventi significativi e attività relative all'uso dei WebSocket.
Infine, ho utilizzato il metodo $appProvider->all() per recuperare tutte le applicazioni WebSocket configurate. Esse gestiscono flussi di dati specifici e possono avere configurazioni personalizzate per diversi scenari.
Questa configurazione delle route è stata realizzata per garantire un ambiente robusto e sicuro per la gestione delle connessioni WebSocket. Consentendo agli utenti di interagire in tempo reale con le funzionalità offerte attraverso connessioni stabili.
Le variabili della vista
Ora non rimane che implementare le variabili nella nostra vista:
<script>
new Vue({
el: "#app",
data: {
connected: false,
pusher: null,
app: null,
apps: "{{$apps}}",
port: "{{$port}}",
host: "{{$host}}",
logChannel: "{{$logChannel}}",
authEndpoint: "{{$authEndpoint}}",
name: null,
formError: false,
incomingMessages: [
// {
// message: "Your message",
// name: "Lucio",
// "time": 2012
// }
],
message: null
},
mounted() {
this.app = this.apps[0] || null;
},
methods: {
connect() {
this.connected = true;
},
disconnect() {
this.connected = false;
},
sendMessage() {
this.formError = true;
},
}
});
</script>E montare l'applicazione. Andiamo avanti e inizializziamo la variabile pusher:
methods: {
connect() {
this.pusher = new Pusher("staging", {
wsHost: this.host,
wsPort: this.port,
wssPort: this.port,
wsPath: this.app.path,
disabledStatus: true,
authEndpoint: this.authEndpoint,
auth: {
headers: {
"X-CSRF-Token": "{{csrf_token()}}",
"X-App-ID": this.app.id
}
},
enabledTransports: ["ws", "flash"]
});
this.pusher.connection.bind('state_change', () => {
// Gestisci lo stato della connessione qui
});
this.pusher.connection.bind('connected', () => {
// Gestisci il codice quando la connessione è stabilita
});
this.pusher.connection.bind('disconnected', () => {
// Gestisci il codice quando la connessione è persa
});
this.pusher.connection.bind('error', event => {
// Gestisci gli errori di connessione qui
});
},
disconnect() {
// Logica per la disconnessione
this.connected = false;
},
sendMessage() {
// Logica per l'invio del messaggio
this.formError = true; // Esempio di impostazione di un errore nel form
},
}Cosa abbiamo fatto
Come puoi notare ho aggiunto la configurazione del client Pusher per stabilire la connessione WebSocket con il server. Ho utilizzato il costruttore new Pusher() per inizializzare una nuova istanza di Pusher. All'interno del costruttore, ho specificato diversi parametri:
staging: dovrebbe essere sostituito con la chiave Pusher reale che identifica l'applicazione Pusher da utilizzare.wsHost,wsPort,wssPort: definiscono l'host e le porte WebSocket su cui il client deve connettersi. Ho usato le variabilithis.hostethis.portper recuperare l'host e la porta dai dati dell'applicazione.wsPath: definisce il percorso WebSocket per l'applicazione. Ho usatothis.app.pathper ottenerlo.disabledStatus: è impostato sutrueper disabilitare lo stato.authEndpoint: definisce l'endpoint per l'autenticazione del client con il server WebSocket.auth: ho specificato le intestazioni per l'autenticazione, inclusi il token CSRF e l'ID dell'applicazione, utilizzando{{csrf_token()}}ethis.app.id.enabledTransports: specifica i trasporti abilitati per la connessione che includono ws e flash.
Inoltre, ho aggiunto vari bind() per gestire gli eventi di cambio stato della connessione (state_change, connected, disconnected, error). Questi eventi sono legati alla connessione Pusher e definiscono come l'applicazione dovrebbe comportarsi quando cambia lo stato, quando si connette, si disconnette o incontra errori.
disconnect(): è stato mantenuto simile al codice originale e semplicemente impostathis.connectedsufalsequando l'utente sceglie di disconnettersi.sendMessage(): anch'esso è stato mantenuto simile al codice originale, impostandothis.formErrorsutrue. Tuttavia, in un contesto reale, dovresti aggiungere la logica per gestire l'invio effettivo dei messaggi tramite WebSocket.
Conclusion sulla comunicazione dispositivo server
In questa lezione abbiamo dedicato tempo per integrare e ottimizzare l'uso dei WebSocket in un'applicazione Laravel. Apportando modifiche per migliorare la gestione delle comunicazioni in tempo reale. Inizialmente abbiamo configurato le rotte web per gestire le richieste degli utenti che visitano la homepage, garantendo che tutte le informazioni vitali per il funzionamento dei WebSocket fossero trasmesse correttamente alla view chat-app.
Abbiamo poi esteso il metodo connect() nell'applicazione Vue.js per includere una configurazione del client Pusher. Questo per stabilire una connessione WebSocket robusta con il server, utilizzando parametri come l'host, le porte WebSocket, il percorso e le intestazioni di autenticazione necessarie per garantire la sicurezza e il controllo dell'accesso.
È stata poi implementata la gestione degli eventi di stato della connessione WebSocket (state_change, connected, disconnected, error) per monitorare i cambiamenti nello stato della connessione. Questi eventi sono stati cruciali per assicurare che l'applicazione gestisse le connessioni attive e gli errori in modo efficace.
Infine, abbiamo mantenuto la chiarezza nei metodi disconnect() e sendMessage(), concentrando l'attenzione sulla gestione dell'interfaccia utente e sull'interazione con la chat attraverso WebSocket. Questi aggiornamenti hanno contribuito a migliorare la UX, garantendo un ambiente di comunicazione in tempo reale efficiente e affidabile.