{JS} API di comunciazione: WebSocket (WSS) – CINQUEPUNTOZERO.it – Full Stack Developer Logbook

Cos'è l'API WebSocket?

Così come l'API EventSource risolve i limiti delle API AJAX e Fetch, ovvero quelli di non essere una connessione persistente, WebSocket, risolve i limiti di EventSource.
I limiti dell'API EventSource sono che quest'ultima non include la possibilità di inviare dei dati.
WebSocket consente ugualmente di attivare una connessione persistente aggiungendo quindi la possibilità di scambiare dati consentendo una comunicazione bilaterale.

new WebSocket()

L'API per utilizzare WebSocket non sono molto diverse da quelle per utilizzare i Server-Sent Events.
Anche in questo caso abbiamo a disposizione una particolare classe:

var connesioneContinuaWSS = new WebSocket("ws:url");

Nell'indicazione dell'url in questo caso dobbiamo includere il protocollo "ws"

var connesioneContinuaWSS = new WebSocket("wss://www.cinquepuntozero.it/");

E' possibile indicare il protocollo "ws" anche nella sua versione sicura "wss" come nell'esempio qui sopra.
Unico requisito affinché sia possibile utilizzare una connessione WebSocket è che il server la supporti.

Per il resto, ad eccezione dei metodi che vedremo alla fine di questo articolo, rispetto a EventSource rimane quasi tutto invariato

Eventi

Abbiamo a disposizione gli stessi eventi di EventSource() con l'aggiunta dell'evento "close"

Evento	Descrizione
open	l’evento si attiva quando è stata stabilita la connessione
error	l’evento si attiva quando non è stato possibile effettuare la connessione
message	l’evento si attiva quando i dati vengono ricevuti; può chiaramente ripetersi
close	l’evento si attiva quando la connessione è stata chiusa

connesioneContinuaWSS.onopen = function(){
	console.log("Connessione aperta.");
}; 
connesioneContinuaWSS.onmessage = function(event){
	console.log("Nuovo messaggio dal server: " + event.data);
};
connesioneContinuaWSS.onerror = function(error){
	console.log("Si è verificato il seguente errore: " + error);
};
connesioneContinuaWSS.onclose = function(){
	console.log("Connessione chiusa.");
});

Proprietà

Proprietà	Descrizione
connesioneContinuaWSS.readyState	restituisce un numero che rappresenta lo stato della connessione; `CONNECTING 0, OPEN` `1 o CLOSED` 2
connesioneContinuaWSS.CONNETING connesioneContinuaWSS.OPEN connesioneContinuaWSS.CLOSED	restituiscono true/false in base al valore della proprietà .readyState
connesioneContinuaWSS.url	restituisce una stringa che rappresenta l’URL della sorgente
connesioneContinuaWSS.withCredentials	restitusice valore booleano true/false che indica se l’ `EventSource` oggetto è stato istanziato con credenziali cross-origin

Metodi

Metodi	Descrizione
connesioneContinuaWSS.close()	chiude la connessione, se presente, e imposta l’ `readyState`attributo su `CLOSED`
connesioneContinuaWSS.send()	consente di inviare dati al server

Fin qui l'API per gestire WebSocket è del tutto similare a EventSource.
Quello che la distingue è la presenza del metodo .send()

.send()

Con il metodo send è possibile inviare dati al server

var msg = {
    type: "message",
    text: document.getElementById("text").value,
    id:   clientID
  };

connesioneContinuaWSS.send(JSON.stringify(msg));

E' possibile inviare diversi tipi di dati:

string
ArrayBuffer
Blob
TypedArray
DataView