Utilizzare Server-Sent Events in HTML5 per comunicazioni in streaming tra client e server

di Daniele Bochicchio,

Server-Sent Events (SSE) è una specifica che prevede una serie di API per aprire una connessione HTTP e poi inviare, su quest'ultima, delle notifiche push.

Tradizionalmente, per le richieste HTTP standard, la risposta arriva dal server web in maniera sincrona, con la chiusura del canale, non appena la stessa è stata processata.
Questo approccio differisce rispetto a HTTP streaming, dove la connessione del server è tenuta aperta e persistente rispetto al client. Questa caratteristica non è supportata da tutti i web server e richiede comunque la scrittura di un codice ad hoc lato server, che non chiuda la connessione, ma invii in maniera cadenzata le informazioni. Queste implementazioni sono disponibili per i framework più diffusi, come ASP.NET, Node.JS, PHP, Ruby.

Il server deve rispondere scrivendo nel corpo della risposta, che deve avere come MIME type il valore text/event-stream, usando questo formato:

data: contenuto del messaggio.

In questo caso, il codice per intercettare il messaggio è semplice:

var sse = new EventSource('mystreamingservice');
sse.onmessage = function (e) {
  var msg = e.data; // qui abbiamo il messaggio inviato
};

Si chiama Server-Sent Events perché è possibile inviare anche messaggi al DOM, utilizzando questo formato:

event: goal
data: Stephan El Shaarawy

event: yellowcard
data: Mathieu Flamini

In questo caso sarà possibile sottoscrivere gli eventi in questo modo:

var sse = new EventSource('mystreamingservice');

sse.addEventListener('goal', function (e) {
  addMessage("GOAL! Ha segnato " + e.data);
}, false);

sse.addEventListener('yellowcard', function (e) {
  addMessage("Cartellino giallo per " + e.data);
}, false);

La connessione è aperta e chiusa in automatico, in caso di disconnessione, dal client, a meno che non venga inviato il codice HTTP 204 No Content, che prevede a chiuderla.

Questa API è stata creata per evitare di fare polling, come avviene utilizzando XMLHttpRequest o iframe, favorendo l'uso di un canale sempre aperto, che evita di sprecare anche batteria su dispositivi mobile.

Attualmente è in fase di RC (Release Candidate) e supportata da Chrome, FireFox, Safari e Opera nelle ultime versioni, ma non da IE <= 10.

Le specifiche complete sono disponibili su
http://www.w3.org/TR/eventsource/

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