Categorie
Javascript Programmazione

{JS} API di comunciazione: WebSocket (WSS)

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”

EventoDescrizione
openl’evento si attiva quando è stata stabilita la connessione
errorl’evento si attiva quando non è stato possibile effettuare la connessione
messagel’evento si attiva quando i dati vengono ricevuti; può chiaramente ripetersi
closel’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.readyStaterestituisce 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.urlrestituisce una stringa che rappresenta l’URL della sorgente
connesioneContinuaWSS.withCredentialsrestitusice valore booleano true/false che indica se l’ 
EventSource oggetto è stato istanziato con credenziali cross-origin

Metodi

MetodiDescrizione
connesioneContinuaWSS.close()chiude la connessione, se presente, e imposta l’ 
readyStateattributo 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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *