WebSocketJS

WebSocket è un protocollo che permette la comunicazione full-duplex su una connessione TCP. Lo standard originale è l'RFC 6464 ed è attualemente mantenuto da WHATWG.

Quella illustrata di seguito è l'implementazione del protocollo fornita dall'oggetto WebSocket utilizzabile all'interno dei browser. Questo oggetto permette di inviare e ricevere i dati da e verso un server remoto in maniera asincrona, non si è limitati allo schema domanda-risposta usato da altri oggetti come XmlHttpRequest.

Esempio

Partiamo subito con un esempio molto minimale in cui sono evidenziate le parti riguardanti la comunicazione con WebSocket:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Comunicazione via Websocket</title> <script type="text/javascript"> "use strict"; function gestoreRicezione(messaggioRicevuto){ document.getElementById("ricezione").textContent += messaggioRicevuto.data + "\n"; // [1] } let ws = new WebSocket("ws://esempio.org/wschat/chat"); // [2] ws.onmessage = gestoreRicezione; function inviaAlServer(){ let messaggioDaInviare = document.getElementById("msg").value; ws.send( messaggioDaInviare ); // [3] } function chiudiLaConnessione(){ ws.close(); // [4] } </script> </head> <body> <textarea id="ricezione" readonly></textarea><br/> <input id="msg" type="text" /> <button onClick="inviaAlServer()">invia!</button> <button onClick="chiudiLaConnessione()">chiudi</button> </body> </html>

La costruzione dell'oggetto [2] richiede un solo parametro: l'indirizzo del WebSocket sul sever, al momento della costruzione viene anche aperta la connessione.

Una volta creato l'oggetto è possibile impostare la proprietà onmessage che è la funzione che verrà chiamata quando arriva un messaggio, alla funzione verrà passato come parametro un oggetto di tipo MessageEvent di cui a noi interessa il campo data [1] che contiene le informazioni ricevute.

Nell'esempio dell'oggetto WebSocket si usano anche due metodi: [3]send() che invia i dati al server e [4] close() che chiude la connessione.