MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

WebSockets è una tecnologia, basata sul protocollo ws, che rende possibile stabilire una connessione continua tra un client e un server. Un client websocket può essere il browser dell'utente, ma il protocollo è indipendente dalla piattaforma, così com'è indipendente il protocollo http.

Note: Abbiamo un esempio funzionante di un sistema chat/server utilizzato per gli snippet di codice che saranno resi disponibili una volta che la nostra infrastruttura sarà pronta per ospitare gli esempi di WebSocket propriamente.

Note: This feature is available in Web Workers.

Creare un oggetto WebSocket

Per rendere possibile la comunicazione utilizzando il protocollo WebSocket avrai bisogno di creare un oggetto WebSocket; questo proverà automaticamente a connettersi con il server.

Il costruttore del WebSocket accetta due parametri, di cui il secondo opzionale:

WebSocket WebSocket(
  in DOMString url,
  in optional DOMString protocols
);
url
Lo URL a cui connettersi, questo dovrebbe essere lo URL al quale il server WebSocket risponderà.
protocols Optional
Una stringa con un singolo protocollo o un array di stringhe di protocolli. Queste stringhe sono utilizzate per indicare i sotto protocolli così che il singolo server possa implementare più sotto protocolli WebSocket (per esempio, potresti volere che un server sia capace di gestire diversi tipi di interazioni dipendentemente dal protocollo specificato). Se non specifighi il protocollo, verrà usata una stringa vuota.

Il costruttore può lanciare un eccezione:

SECURITY_ERR
La porta a cui la connessione sta provado ad accedere è bloccata.

Errori di connessione

Se accade un errore durante un tentativo di connessione, prima un semplice evento con il nome "error" è inviato all'oggetto WebSocket (invocando così il suo gestore onerror), e poi CloseEvent (invocando così il gestore onclose) per indicare la ragione della chiusura di connessione.

Da Firefox 11 tuttavia, è tipico ricevere un errore descrittivo nella console della piattaforma Mozilla e un codice di chiusura definito in RFC 6455, Section 7.4 attraverso CloseEvent.

Esempi

Questo semplice esempio crea un nuovo WebSocket, connettendosi al server all'indirizzo ws://www.example.com/socketserver. Un protocollo chiamato "protocolOne" è presente nella richiesta per il socket in esempio anche se omesso.

var esempioSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");

Alla restituzione, esempioSocket.readyState è CONNECTING. Il readyState diventerà OPEN quando la connessione sarà abilitata a trasmettere dati.

Se vuoi aprire una connessione e essere flessibile sui protocolli che supporti, puoi specificare un array di protocolli:

var esempioSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);

Quando la connessione è stabilita (quindi readyState è OPEN), esempioSocket.protocol ti dirà quale protocollo il server ha selezionato.

Negli esempi qui sopra, ws sostituisce http, così come wss sostituisce https. Per stabilire un WebSocket ci si basa sul meccanismo di upgrade HTTP, così la richiesta per l'aggiornamento del protocollo è implicita quando richiamiamo il server HTTP come ws://www.example.com oppure wss://www.example.com.

Inviare dati al server

Una volta stabilita la connessione puoi trasmettere dati al server. Per farlo, chiama il metodo send() dell'oggetto WebSocket per ogni messaggio che vuoi inviare:

esempioSocket.send("Ecco del testo che il server sta aspettando di ricevere!"); 

Puoi inviare dati come una stringa, Blob o un ArrayBuffer.

Note: Prima della versione 11, Firefox supportava solamente l'invio di dati come stringa.

Stabilire una connessione è un'operazione di natura asincrona e quindi incline a errori. Chiamare il metodo send() immediatamente dopo la creazione del WebSocket non ne implica il successo. Possiamo assicurarci che l'invio di dati venga fatto dopo l'avvenuta connessione con un gestore onopen:

esempioSocket.onopen = function (event) {
  esempioSocket.send("Ecco del testo che il server sta aspettando di ricevere!"); 
};

Usare JSON per trasmettere oggetti

Una cosa utile che puoi fare è di utilizzare JSON per inviare dati ragionevolmente complessi al server. Per esempio, un programma di chat puoi interagire con il server utilizzando pacchetti di dati JSON-incapsulati:

// Invia del testo a tutti gli utenti tramite il server
function sendText() {
  // Costruisci un oggetto msg contenente i dati di cui il server ha bisogno per processare il messaggio dalla chat del client.
  var msg = {
    type: "message",
    text: document.getElementById("text").value,
    id:   clientID,
    date: Date.now()
  };

  // Invia l'oggetto msg formattato come una stringa JSON.
  esempioSocket.send(JSON.stringify(msg));
  
  // Togli il testo dall'elemento di input, pronto a ricevere la prossima linea di testo dall'utente.
  document.getElementById("text").value = "";
} 

Ricevere messaggi dal server

WebSockets è una API dipendente dagli eventi; quando i messaggi sono ricevuti, un evento "message" è inviato alla funzione onmessage. Per iniziare a ascoltare per la ricezione di dati puoi fare così:

esempioSocket.onmessage = function (event) {
  console.log(event.data);
}

Ricevere e interpretare oggetti JSON

Prendiamo in considerazione l'applicazione chat sul client richiamata precedentemente in Usare JSON per trasmettere oggetti. Ci sono diversi tipi di pacchetti di dati che il client potrebbe ricevere, come:

  • Login handshake
  • Messaggio di testo
  • Aggiornamenti lista utenti

Il codice che interpreta questi messaggi in arrivo potrebbe assomigliare a questo:

esempioSocket.onmessage = function(event) {
  var f = document.getElementById("chatbox").contentDocument;
  var text = "";
  var msg = JSON.parse(event.data);
  var time = new Date(msg.date);
  var timeStr = time.toLocaleTimeString();
  
  switch(msg.type) {
    case "id":
      clientID = msg.id;
      setUsername();
      break;
    case "username":
      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
      break;
    case "message":
      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
      break;
    case "rejectusername":
      text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>"
      break;
    case "userlist":
      var ul = "";
      for (i=0; i < msg.users.length; i++) {
        ul += msg.users[i] + "<br>";
      }
      document.getElementById("userlistbox").innerHTML = ul;
      break;
  }
  
  if (text.length) {
    f.write(text);
    document.getElementById("chatbox").contentWindow.scrollByPages(1);
  }
};

Qui utilizziamo JSON.parse() per convertire l'oggetto JSON all'oggetto originale, poi esaminiamo e agiamo sui suoi contenuti.

Formato dati testo

Il testo ricevuto attraverso una connessione WebSocket è in formato UTF-8.

Prima di Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6), alcuni non-caratteri in UTF-8 valido causavano la chiusura della connessione. Adesso Gecko permette questi valori.

Chiudere la connessione

Quando hai finito di usare la connessione WebSocket, chiama il metodo close() del WebSocket:

esempioSocket.close();

Potrebbe essere utile esaminare l'attributo bufferedAmount prima di provare a chiudere la connessione per assicurarsi che non ci siano dati che devono essere ancora trasmessi al network.

Considerazioni di sicurezza

I WebSockets non dovrebbero essere usati in un ambiente di contenuti misti; non dovresti aprire connessioni non sicure da una pagina che carica attraverso HTTPS o viceversa. Alcuni browser lo vietano esplicitamente, compreso Firefox 8 e superiore.

Tag del documento e collaboratori

Tag: 
 Hanno collaborato alla realizzazione di questa pagina: mnemosdev
 Ultima modifica di: mnemosdev,