In der YUI 3 Gallery: Server-Sent Events »Yahoo! User Interface Blog (YUIBlog)

In der YUI 3 Gallery: Server-Sent Events

29. November 2010 um 11.49 Uhr von Nicholas C. Zakas | In Entwicklung , YUI 3 Gallery | Keine Kommentare

Push-Benachrichtigungen auf der Web werden immer populärer, wie sie in der Aufregung über belegt Web Sockets , und das mit gutem Grund. Das Web ist zur genaueren und up-to-date Informationen bewegend wie das Publikum auf das Internet wiederum für die Echtzeit-Updates von Beständen, Nachrichten, Sport und vieles mehr. Während Web Sockets stellt einen riesigen Sprung nach vorn im Bereich der Push-Benachrichtigungen, gibt es eine weniger bekannte spec, dass ein kleiner Sprung betrachtet darf gespannt sein: Server-Sent Events .

Server-Sent Events (SSE) haben auch zum Ziel Push-Benachrichtigungen erleichtern, indem auf der Oberseite der Techniken, die Entwickler die bereits ausgerichtet sind. Im Gegensatz zu Web Sockets Gegensatz nutzt SSE regulären HTTP mit dem Server kommunizieren und erlaubt Ihnen zu entscheiden, ob auf HTTP-Streaming , lange Polling oder sogar regelmäßiges Polling, um neue Daten abgerufen werden können (obwohl dies nicht empfohlen).

Im Mittelpunkt der SSE ist die EventSource Objekt. Die YUI 3 Gallery EventSource Modul erzeugt eine Cross-Browser-Umsetzung der EventSource und bringt Unterstützung für Server-Sent Events auf allen Browsern, die Unterstützung XMLHttpRequest , einschließlich Internet Explorer 6, während Zurückgreifen auf die native Implementierung in Browsern, die es haben (derzeit Safari 5, Chrome 7 und Opera 10,7).

Die EventSource interpretiert eine Antwort als Event-Stream (angedeutet durch einen Inhaltstyp "text / event-stream") und feuert entsprechenden Ereignisse. Es gibt drei vordefinierte Ereignisse:

open - wird ausgelöst, wenn die Verbindung mit dem Server hergestellt wurde.
message - wird ausgelöst, wenn eine neue Nachricht vom Server empfangen wird. Die event.data Eigenschaft enthält die neuen Daten.
error - wird ausgelöst, wenn ein Fehler in der Verarbeitung der Event-Stream kommt. Sobald dieses Ereignis ausgelöst wird, werden keine weiteren Ereignisse verarbeitet werden und die Server-Verbindung ist dauerhaft geschlossen.

Die Event-Stream selbst ist Klartext-Daten aus dem Schlüsselwort gemacht "data:" durch einige Daten auf einer einzigen Zeile. Wenn Sie mehrere Zeilen haben wollen, müssen Sie mehrere Zeilen mit "data:" Vorsätze. Eine leere Zeile wird als die Grenze zwischen den Ereignissen. Hier ist ein einfaches Beispiel:

 data: hello data: hello data: world

Zwei message Ereignisse sind mit diesem Event-Stream gebrannt. Die erste hat event.data um "hallo" gesetzt, während der zweite hat event.data zu "Hallo \ nworld" (man beachte die neue Zeile) gesetzt.

Hier ist ein Beispiel für das Erstellen einer neuen EventSource Beispiel:

 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!"); }); });

Der Konstruktor akzeptiert ein einziges Argument, das die URL der Event-Stream ist. Die interessante und nützliche Teil EventSource ist, dass es automatisch auf den Server verbinden, wenn die Verbindung aus irgendeinem Grund verloren geht. Dies entlastet die Entwickler aus, die es angeht trennen und wieder, eine häufige Beschwerde bei der Verwendung von Sorgen XMLHttpRequest für Push-Benachrichtigungen.

Auch wenn der YUI 3 Gallery EventSource Modul entspricht der Spezifikation mit Unterstützung für HTTP-Streaming, lange Polling und regelmäßige Abruf, nicht alle Browser unterstützen alle drei. Internet Explorer (bis einschließlich Version 9) nicht unterstützt HTTP-Streaming, während er leicht verlängert oder regelmäßiges Polling. Die empfohlene Verwendung dieses Moduls ist es, Ihre Erfahrungen mit einer langen Polling-Implementierung für optimale Leistung und Kompatibilität zu bauen.

Wenn Sie möchten, dass für Browser, HTTP-Streaming-Unterstützung zu optimieren, setzt das Modul eine spezielle X-YUIEventSource-PollOnly Header, wenn es einen Browser, der nicht verwenden können HTTP-Streaming erkennt. Sie können für diesen Header auf dem Server überprüfen, um den richtigen Weg, um Daten dienen zu bestimmen. Hier ist ein Beispiel für die Implementierung mit Hilfe von 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; } } %>

Es ist ziemlich einfach, bestehende Long-Polling-Lösungen migrieren, um SSE zu verwenden, sofern das Datenformat ist einfach. Da das Format der Veranstaltung Streams ist line-basiert, könnte das bedeuten Neuformatierung einige Daten auf einer einzigen Zeile anstelle von mehreren Linien zu sitzen.

Während SSE nie werden die gleichen Leistungsmerkmale wie Web Sockets die auf die Verwendung HTTP, stellt sie eine logische Weiterentwicklung der Push-Benachrichtigungen in Browsern. SSE können ältere ersetzen XMLHttpRequest -basierte Lösungen mit weniger Code und bessere Fehlerbehandlung, die alle unter Beibehaltung der gleichen Authentifizierung Paradigma.

Die YUI 3 Gallery EventSource Modul implementiert fast alle der SSE spec (Sie können in den Quellcode, welche Teile noch nicht nach "TODO", kommentiert umgesetzt zu sehen). Dies liegt daran, einige der Features vage beschrieben werden. Das Modul unterstützt folgende Funktionen:

Einfache Ereignisse (Brand message Ereignis).
Benutzerdefinierte Ereignisse (ein Ereignis mit dem angegebenen Namen in bestimmten "event:")
Ereignis-IDs (gefangen in event.lastEventId und an den Server gesendet)

Die Teile, die erst noch umgesetzt werden sollen Unterstützung für Wiederanschluss Zeiten und die event.origin Eigentum. Ansonsten sollte alles andere verhalten sich genauso wie die native Implementierung.