Comunicazione bidirezionale con WebSockets e HTML5

di Andrea Colaci,

WebSocket è un protocollo, parte delle specifiche HTML5, che offre la possibilità di instaurare una comunicazione bidirezionale Full-Duplex su una porta TCP/IP tra un Client ed un Server, partendo da una normale richiesta HTTP che viene processata e scalata verso WebSocket (processo di upgrade).

La peculiarità di una comunicazione di tipo Full-Duplex è di trasmettere e ricevere dati simultaneamente tra gli "interlocutori", tipicamente un servizio server-side ed uno script client-side. Il numero degli interlocutori è tuttavia "illimitato", ma dipende anche dalla capacità del sistema di contattare tutti i client potenzialmente connessi.

Nell'ambito dello sviluppo di applicazioni web, che devono disporre di funzionalità real-time, websockets è la tecnologia HTML5 di riferimeno cui le applicazioni web dovrebbero tendere in futuro.

Implementare una comunicazione client-server prevede lo sviluppo di una controparte server in grado di conttattare collettivamente (broadcast) o puntualmente (unicast) tutti i client attualmente connessi.

Esistono diverse alternative, in diversi linguaggi, per implementare il servizio server-side, ma in questo script ci concentreremo solo sulla controparte client che, aderendo al protocollo ws (o wss in caso di websocket secure) sarà in grado di comunicare con il server indipendentemente dalla tecnologia con cui quest'ultimo è stato sviluppato.

Javascript

var serverUrl = "ws://myserverurl.com/"; //use wss: for secure websockets
var output;

function initialize() {

  websocket = new WebSocket(serverUrl);

  //setting up event handlers
  websocket.onopen = function(event) { onOpen(event); }; 
  websocket.onclose = function(event) { onClose(event); }; 
  websocket.onmessage = function(event) { onMessage(event); }; 
  websocket.onerror = function(event) { onError(event); }; 

} 

function onOpen(event) { 
  writeLog("Successfully connected to: " + serverUrl);

  var message = {
    senderName: "Andrea",
    messageText: "Hi!",
    position: getPosition()};

  var rawData = JSON.stringify(message);

  sendMessage(rawData);
} 

function onClose(event) { 
  writeLog("Disconnected");
}

function onMessage(event) {
  var message = JSON.parse(event.data);
  writeLog('Message received from' + message.senderName + ': ' + message.messageText);
}

function onError(event) { 
  writeLog('Error:' + event.data);
}

function sendMessage(message) {
  writeLog("sending message: " + message);
  websocket.send(message);
}  

function writeLog(message) { 
  console.log(message);
} 

Come dimostrato nello script, è sufficiente istanziare un oggetto WebSocket e sottoscrivere gli eventi significativi che questo espone. In questo esempio abbiamo utilizzato un oggetto serializzato in formato JSON e trasmesso come testo.

Trattandosi di una comunicazione di tipo streamed, non si presentano limiti di dimensioni dei messaggi, leggendo le specifiche si apprende anche che il limite della lunghezza di un frame è di 2^63 byte, ma un messaggio può essere composto da un numero illimitato di frame. Tuttavia il browser metterà a disposizione l'intero messaggio, tramite script, solo alla fine della ricezione effettuando implicitamente il buffering.

Le applicazioni che possono beneficiare di questa tecnologia sono molteplici, pensiamo ad esempio a tutti gli scenari in cui occorra inviare una notifica ad un client, magari al completamento di una elaborazione, alla disponibilità di un prodotto o magari l'invio di un mesaggio/comunicazione mirata sulla base delle interazioni degli altri utenti (es. consultazione dello stesso annuncio, invio di un offerta etc.).

Le specifiche delle WebSocket API sono disponibili qui:
http://www.w3.org/TR/websockets/

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi