Yahoo! User Interface Blog (YUIBlog)

Nella Galleria 3 YUI: Server-Sent Events

Le notifiche push sul web sono in aumento in popolarità, come dimostra l'eccitazione per Sockets Web , e con buona ragione. Il web si sta spostando verso informazioni più accurate e up-to-date, come il pubblico rivolgono a Internet per aggiornamenti in tempo reale delle scorte, notizie, sport e altro ancora. Mentre Web Sockets rappresenta un enorme passo avanti nel campo delle notifiche push, c'è un meno noto spec che può essere considerato un piccolo salto in avanti: Server-Sent Events .

Eventi Server-Sent (SSE) sono anche mirati a rendere più facile le notifiche push edificio in cima a delle tecniche che gli sviluppatori stanno già utilizzando. Al contrario di Web Sockets, SSE utilizza una normale connessione HTTP per comunicare con il server e consente di decidere se utilizzare lo streaming HTTP , polling lungo , o addirittura polling regolare per recuperare i dati nuovi (anche se questo non è raccomandato).

Al centro della SSE è il EventSource oggetto. Il YUI 3 Galleria EventSource modulo crea un cross-browser attuazione EventSource , portando il supporto per gli eventi-Server inviati a tutti i browser che supportano l' XMLHttpRequest , compreso Internet Explorer 6, mentre ricadendo l'implementazione nativa nei browser che hanno (attualmente Safari 5, Chrome 7, e Opera 10.7).

Il EventSource interpreta una risposta come un flusso di eventi (significata da un tipo di contenuto "text / event-stream") e spara eventi appropriati. Ci sono tre eventi predefiniti:

• open - gli incendi quando la connessione con il server è stato stabilito.
• message - fuochi quando un nuovo messaggio viene ricevuto dal server. Il event.data proprietà contiene i nuovi dati.
• error - incendi, quando si verifica un errore nella elaborazione del flusso di eventi. Una volta che questo evento viene generato, senza ulteriori eventi saranno trattati e la connessione al server viene chiuso definitivamente.

Il flusso di eventi è di per sé i dati di testo costituiti i "Dati:" parola chiave seguita da alcuni dati su una singola linea. Se desiderate avere più righe, è necessario includere più righe con "dati:" prefissi. Una linea vuota viene considerato il confine tra eventi. Ecco un semplice esempio:

 data: hello data: hello data: world 

Due message eventi vengono generati con questo flusso di eventi. Il primo è event.data impostato su "ciao" mentre il secondo ha event.data impostato su "ciao \ nworld" (notare la nuova linea).

Ecco un esempio di creazione di un nuovo EventSource esempio:

 YUI({ gallery: 'gallery-2010.11.17-21-32' }).use('gallery-eventsource', function(Y) { var src = new Y.EventSource("stream.php"); src.on("open", function(event){ console.log("Connection opened!"); }); src.on("message", function(event){ console.log("Data received: " + event.data); }); src.on("error", function(event){ console.log("Error!"); }); }); 

Il costruttore accetta un singolo argomento, che è l'URL del flusso di eventi. La parte interessante e utile di EventSource è che si ricollegherà automaticamente al server se la connessione viene interrotta per qualsiasi motivo. In questo modo libera gli sviluppatori dalla necessità di preoccuparsi di scollegare e ricollegare, una lamentela frequente quando si utilizza XMLHttpRequest per le notifiche push.

Anche se il YUI 3 Galleria modulo EventSource corrisponde alla specifica con il supporto per lo streaming HTTP, polling lungo, e sondaggi di regolare, non tutti i browser supportano tutti e tre. Internet Explorer (fino al versione 9) non supporta lo streaming HTTP, mentre si può facilmente gestire polling lungo o regolare. L'utilizzo consigliato di questo modulo è quello di costruire la vostra esperienza con una implementazione polling lungo per ottenere le migliori prestazioni e compatibilità.

Se desideri ottimizzare per i browser che supportano lo streaming HTTP, il modulo stabilisce una speciale X-YUIEventSource-PollOnly intestazione quando rileva un browser che non può utilizzare lo streaming HTTP. È possibile verificare la presenza di questa intestazione sul server per determinare il modo corretto di fornire i dati. Ecco un esempio di implementazione utilizzando JSP:

 <%@page contentType="text/event-stream" buffer="none"%> <% //check for poll-only header String header = request.getHeader("X-YUIEventSource-PollOnly"); //check every so often to see if there's new data while(true) { //sleep for a second - simulate waiting for data Thread.sleep(1000); //output the current time, ensure there are two trailing newlines out.print("data: " + (new java.util.Date()).toString() + "x\n\n"); out.flush(); //if it's a poll-only request, break the loop, //which ends the request - the client will reconnect if (header != null){ break; } } %> 

E 'abbastanza facile migrare esistenti soluzioni di polling lungo da usare SSE, a condizione che il formato dei dati è semplice. Poiché il formato dei flussi di eventi è basata su righe, che potrebbe significare la riformattazione alcuni dati di sedersi su una sola riga, invece di linee multiple.

Mentre SSE non avrà mai le stesse prestazioni come Web Sockets dovuta all'utilizzo HTTP esso in realtà rappresenta una logica evoluzione di notifiche push nei browser. SSE può sostituire i vecchi XMLHttpRequest basate su soluzioni con meno codice e migliore gestione degli errori, il tutto mantenendo lo stesso paradigma di autenticazione.

Il YUI 3 Galleria EventSource modulo implementa quasi tutte le specifiche SSE (si può vedere nel codice sorgente che le parti non sono ancora implementate attraverso la ricerca di "TODO" commenti). Questo perché alcune delle caratteristiche sono vagamente descritti. Il modulo supporta le seguenti funzionalità:

• Eventi semplici (fuoco message evento).
• Eventi personalizzati (il fuoco di un evento che corrisponde al nome specificato in "event:")
• ID evento (catturato in event.lastEventId e inviato al server)

Le parti che devono ancora essere attuate sono il supporto per i tempi di riconnessione e la event.origin proprietà. In caso contrario, tutto il resto dovrebbe comportarsi la stessa implementazione nativa.

Letture consigliate

• Introduzione a Server-Sent Events
• Il lungo viaggio di Server-Sent Events

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!