Il supporto alle WebSocket API, offerto oggi dai maggiori browser, rappresenta una svolta nell'ambito delle interazioni tra client-side e server-side delle applicazioni web. Mentre prima era inevitabilmente necessario ricorrere alle chiamate AJAX, implementando meccanismi come il polling per consentire lo scambio di informazioni tra le due parti, con le WebSocket è possibile aprire un canale di comunicazione bilaterale costantemente attivo. Ciò significa non solo che è possibile implementare il polling senza ricorrere ad AJAX, ma anche che meccanismi molto più efficaci ed apparentemente complessi (quali le notifiche push o la messaggistica istantanea) sono ora realizzabili con estrema facilità.
In questa guida ci concentreremo principalmente sull'implementazione di un server in grado di gestire la comunicazione tramite le WebSocket. Questa tecnologia si basa su un protocollo (simile ad HTTP nell'handshake iniziale, ma per il resto abbastanza diverso) che può essere gestito in modo trasparente al programmatore tramite l'utilizzo di alcune librerie software. Nelle prossime lezioni impararemo come utilizzarle, in modo da implementare un WebSocket server compatibile con diversi linguaggi di programmazione.
E il client?
Prima di andare avanti, è bene riassumere brevemente l'utilizzo delle WebSocket API lato client. Nel corso della guida ci riferiremo essenzialmente al loro utilizzo in un'applicazione web, e di conseguenza vediamo brevemente il codice JavaScript che consente di aprire una connesione e gestire l'arrivo o l'invio di nuovi messaggi.
La comunicazione si basa sull'utilizzo di un oggetto di tipo WebSocket, che può essere dichiarato in JavaScript come segue:
var socket = new WebSocket("ws://echo.websocket.org/");
L'URI passato come argomento del costruttore sarà punterà al nostro server (nel nostro caso identificato da echo.websocket.org). Le prime lettere dell'URI consentono di specificare il livello di sicurezza della connessione: possiamo utilizzare ws://, ottenendo una comunicazione non cifrata ma meno onerosa e più rapida, oppure wss://, in modo da sfruttare una connessione sicura, cifrata con TLS/SSL.
Una volta definito l'oggetto socket come precedentemente descritto, vediamo un esempio di codice che mostra i metodi principali per la gestione della comunicazione via WebSocket su JavaScript.
function onOpen() {
// Funzione eseguita all'apertura della connessione
};
function onClose() {
// Funzione eseguita alla chiusura della connessione
};
function onMessage(data) {
// Funzione eseguita alla ricezione di un messaggio
// Il parametro 'data' rappresenta il contenuto del messaggio
};
function onError() {
// Funzione eseguita in caso di errore
};
var socket = new WebSocket("ws://echo.websocket.org/");
socket.onopen = onOpen;
socket.onclose = onClose;
socket.onerror = onError;
socket.onmessage = onMessage;
Eseguendo questo codice, subito dopo l'apertura della connessione verrà invocato il metodo onopen dell'oggetto socket. Ogni volta che il server invierà un messaggio, invece, sarà il metodo onmessage ad essere eseguito: tramite il parametro data sarà infatti possibile leggere il contenuto del messaggio, utilizzandolo come meglio si ritiene. Alla chiusura della connessione (che può avvenire in qualsiasi momento, per qualsiasi problema dovuto al server), sarà eseguito il metodo onclose. Infine, se per altri motivi si verifica un errore (dovuto talvolta non al server, quanto piuttosto al browser), verrà eseguito il metodo onerror.
Prima di proseguire, abbiamo bisogno di capire come inviare un messaggio dal client al server. Per farlo, una volta inizializzato l'oggetto socket, è sufficiente utilizzare il metodo send:
socket.send("messaggio d'esempio");
Con send possiamo inviare una qualsiasi stringa, formattata a nostro piacimento, e riceverla tale e quale sul server.
Quelli visti fin qui sono solo i metodi di base che consentono di gestire la comunicazione con le WebSocket. Per maggiori dettagli, rimandiamo ad un altro articolo, sempre su HTML.it, che introduce in maniera più completa le WebSocket API.