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>
"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.