WebSockets e HTML5: il tutorial introduttivo

Sin dall'origine del web uno dei suoi limiti principali (ma forse anche una delle caratteristiche che l'hanno resa semplice e dunque di successo) è l'architettura "stretta" client-server, ovvero una modalità di comunicazione in cui c'è un client ben definito che fa le "domande" e un server (web, pensiamo ad Apache) che fornisce le "risposte" (pagine web, immagini, etc.) solo quand interrogato

Se questa struttura è perfetta per un web "statico" fatto di pagine collegate fra loro in cui la richiesta di nuovo contenuto è stimolata dal click su un link da parte dell'utente del browser, questa stessa architettura non è per nulla ideale per applicazioni complesse e ricche di comunicazioni bidirezionali (pensiamo ad un gioco multiplayer via web) o dove le informazioni potrebbero dover arrivare quando sono disponibili e non quando l'utente "fa" qualcosa (ad esempio in applicazioni finanziarie o in real-time)

WebSockets

Come abbiamo ormai capito, HTML5 risolve in maniera fantastica anche questi problemi offrendo ai developer una soluzione semplice, efficiente, efficace - in una parola, geniale. E quella parola è WebSockets, ovvero un set di API nato apposta per permettere ai browser e server di parlari in maniera asincrona e senza bisogno dell'interazione dell'utente.

Ma vediamo come funziona il tutto. Per prima cosa aprire una connessione (creare cioè un websocket) è semplice quanto scrivere questa riga:

var connection = new WebSocket('ws://echo.websocket.org/');

Avrete notato il protocollo "ws://". Esiste anche un "wss://" per le comunicazioni sicure (un po' come "https://") e la riga di codice appena scritta dice semplicemente di creare una connessione ("socket") al server con cui abbiamo deciso di instaurare il nostro "dialogo"

A questo punto basteranno un paio di funzioni come queste:

// Quando apriamo la connessione mandiamo un messaggio 'Ping' al server connection.onopen = function () { connection.send('Ping'); }; // Errori (nella console) connection.onerror = function (error) { console.log('WebSocket Error ' + error); }; // Messaggi dal server connection.onmessage = function (e) { console.log('Server: ' + e.data); };

Ed è tutto qui. In sostanza per inviare messaggi al server ci basterà fare un

connection.send('contenuto del messaggio');

mentre quando riceviamo messaggi dal server verrà richiamata la nostra funzione che abbiamo definito come

connection.onmessage = function (e) { console.log('Server: ' + e.data); };

Utilizzo e demo

Adesso che abbiamo definito come usare questo strumento, vediamo che cosa ci possiamo fare. Un po' di idee e applicazioni esistenti sono:

chat in real-time
giochi multiplayer online (WordSquared, un ottimo Scarabeo online)
aggiornamento in tempo reale di informazioni (Kaazing.me)
condivisione di disegni e sketch online (demo - articolo)

Supporto e soluzioni di fallback

Il protocollo WebSockets ha recentemente subito una serie di modifiche da parte della IETF. Attualmente, dunque, la maggior parte dei browser moderni (IE9, Chrome, Safari e Firefox) supportano la versione 76 delle specifiche. Se vogliamo godere dei benefici di WebSockets ma offrire anche agli utenti con un browser più vecchi possiamo usare il trucco del "long polling" con HTTP, ovvero una modalità che ci consente di aprire una connessione con il server e tenerla aperta, ricevendo dati ogniqualvolta il server ha qualcosa da dirci. Per saperne di più: la pagina di Wikipedia su "Comet" e il sito Comet Daily con tutte le info su questo modello di comunicazione.

E' da ricordare, infine, che alcuni proxy (ad esempio quelli della nostra azienda) possono "interferire" con le comunicazioni WebSockets dal momento che questi usano il meccanismo di "upgrade" del protocollo HTTP e non a tutti i proxy questo piace. Potrebbe dunque accadere che il nostro browser li supporti ma noi non possiamo comunque usarli a causa di qualche proxy o server intermedio che si rifiuta di farli passare.

E il server?

Fino ad ora abbiamo parlato del lato client (lato che, in quanto appassionati di HTML5, è quello che ci interessa di più). Come avrete intuito dai nostri esempi per funzionare i WebSockets hanno bisogno anche de lato server, ovvero di un software che sappia rispondere e gestire le nostre comunicazioni lato client. Alcune soluzioni attualmente disponibili - per chi fosse interessato - sono:

Approfondimenti

Giunti al termine del nostro tutorial introduttivo su WebSockets non resta che salutarvi e indicarvi le risorse principali per approfondire l'argomento: