Sfruttare il polyfill EventSource per compatibilità tra Server-sent event, long polling e polling in HTML5

di Daniele Bochicchio,

Negli script precedenti abbiamo visto come implementare tecniche basate su WebSocket, Server-sent Events e long polling, per poter avere comunicazioni in real time tra client e server.

E' utile sottolineare, ancora una volta, che a parte WebSocket, che apre un canale full duplex tra client e server, le altre tecniche sono dei workaround più o meno complessi, che comunque raggiungono l'obiettivo, dato che supportano browser dove le API di WebSocket non sono presenti.

In scenari del genere, non tutti i browser supportano in maniera simile le specifiche, per cui è necessario implementare un meccanismo di fallback, che sfrutti quello che ogni browser è in grado di offrire.

Fermo restando che nel caso di WebSocket è necessario un approccio differente, perché la comunicazione è full-duplex, ci sono diverse library in giro che offrono questa opportunità, come ad esempio l'EventSource Polyfill di Remy Sharp, disponibile su:
https://github.com/remy/polyfills/blob/master/EventSource.js

Questa library consente di sfruttare Server-sent Events, long polling e polling, con una sola API:

<script src="EventSource.js"></script>
<script type="text/javascript">var es = new EventSource('myserver.api');

es.onopen = function() {
  // canale aperto
}

es.onerror = function() {
  // errore
}

es.onmessage = function (e) {
  // messaggio ricevuto dal server
  var msg = e.data;
};

</script>

Questa tecnica raggiungere una buona compatibilità, dato che è in grado di supportare IE 7 e versioni molto vecchie di tutti gli altri browser.

Oltre alla parte lato client, è poi necessario che il server sia in grado di supportare lo switch automatico, sfruttando le differenti header che vengono inviate, in base al tipo di richiesta effettuata. In tal senso, l'implementazione varia in maniera significativa a seconda del framework che viene utilizzato lato server.

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