Kernpunkte

• Serversende Ereignisse (SSE) ist eine Methode zum Drücken von Daten und/oder DOM -Ereignissen vom Server zum Client mit Streams und ideal für Situationen, in denen Daten regelm??ig aktualisiert werden müssen, z. B. Sportwerte oder Aktienzitate.
• Erstellen von EventSource -Objekten erm?glicht es Ihnen, Ereignisstr?me abonnieren, und k?nnen offene Ereignisse mit offenen, Nachricht und Fehler verarbeiten.
• Senden von Ereignissen vom Server müssen der Inhalt mithilfe der Codierung Content-type (Wert text/event-stream) und UTF-8-Zeichen zur Verfügung gestellt werden. Die Syntax für den Server zum Senden von Ereignissen umfasst Daten, Ereignisart, Ereigniskennung und Wiederholungsintervall.
• Ereignisbearbeitung kann die Funktion onmessage nur für Anwendungen verwenden, die Nachrichtenereignisse senden), aber die addEventListener -Methode ist flexibler für die Behandlung benutzerdefinierter Ereignisse.
• Die meisten modernen Browser (einschlie?lich Chrome, Firefox und Safari) unterstützen Server -Senden -Ereignisse (SSE), aber Internet Explorer nicht. Für Anwendungen, die Unterstützung für alle Browser erfordern, k?nnen Websockets oder lange Umfragen besser angemessen sein.

1. Einführung
2. Abonnieren Sie Stream: EventSource -Objekt
3. Ereignisse vom Server senden
   1. Meldungsereignis senden
   2. Senden Sie benutzerdefinierte Ereignisse
   3. Verbinden Sie mithilfe des Wiederholungsintervallmanagements
   wieder ein
   4. Setzen Sie eindeutige Kennung mit dem Feld ID
4. Verarbeitungsereignisse
5. Verarbeitungsfehler
6. Browser -Implementierungsunterschiede
7. Browser -Unterstützung und Fallback -Strategie

Angenommen, das nationale Basketballteam Ihres Landes nimmt an der Weltbasketball -Meisterschaft teil. Sie m?chten dem Spiel folgen, aber Sie k?nnen es nicht sehen, weil die Spielzeit mit Ihren Arbeitszeiten in Konflikt steht.

Zum Glück hat Ihr nationaler Nachrichtenservice ein sehr herausragendes Webentwicklungsteam. Sie erstellten ein Sportinformations -Scrolling -Display, das aktualisiert wird, wenn ein Foul oder eine Punktzahl auftritt. Wenn Sie eine URL besuchen, wird das Update direkt in Ihren Browser weitergegeben. Natürlich m?chten Sie wissen, wie sie es gemacht haben. Die Antwort lautet: Der Server sendet das Ereignis.

Server -Send -Ereignisse ist eine M?glichkeit, einen Stream zu verwenden, um Daten und/oder DOM -Ereignisse vom Server zum Client zu verschieben. Es ist für Aktienzitate, Sportwerte, Flugverfolgung und E -Mail -Benachrichtigungen geeignet - jede Situation, in der Daten regelm??ig aktualisiert werden müssen.

Warten Sie! Ich habe geh?rt, dass Sie sagen, K?nnen wir dies nicht bereits mit XMLHTTPrequest oder WebSockets tun? Ja, ja. Dies erfordert jedoch die Erweiterung dieser Objekte, um die Funktionalit?t von Eventsource selbst zu implementieren.

Vorsichtsma?nahmen auf der Serverseite

Da der Server Ereignisse sendet, sind Datenstr?me langfristige Verbindungen. Sie müssen einen Server verwenden, der eine gro?e Anzahl gleichzeitiger Verbindungen verarbeiten kann. Natürlich sind ereignisorientierte Server besonders für Streaming-Ereignisse geeignet. Dazu geh?ren Node.js, Juggernaut und Twisted. Für Nginx k?nnen Sie das Nginx-Push-Stream-Modul verwenden. Die Serverkonfiguration liegt jedoch au?erhalb des Rahmens dieses Artikels und h?ngt von dem von Ihnen verwendeten Server ab.

Lassen Sie uns sehen, wie Sie einen Stream mithilfe von EventSource -Objekten abonnieren. Dann werden wir sehen, wie Ereignisse gesendet und verarbeitet werden.

Abonnieren Sie den Ereignisstrom: EventSource -Objekt

Ein EventSource -Objekt erstellen ist einfach.

var evtsrc = new EventSource('./url_of/event_stream/',{withCredentials:false});

Der EventSource -Konstruktor akzeptiert bis zu zwei Parameter:

• eine URL -Zeichenfolge (erforderlich);
a
• optionales -Dictionary -Parameter, mit der der Wert des -attributs definiert wird. withCredentials

W?rterbücher sind syntaktisch ?hnlich wie Objekte, aber sie sind tats?chlich assoziative Datenarrays mit definierten Namenswertpaaren. In diesem Fall ist

das einzig m?gliche W?rterbuchmitglied. Sein Wert kann wahr oder falsch sein. (Weitere Informationen zu W?rterbüchern finden Sie in der Web -IDL -Spezifikation.) withCredentials

Dictionary-Parameter sind nur erforderlich, wenn Cross-Dom?nen-Anfragen nach Benutzeranmeldeinformationen (Cookies) angefordert werden. Bisher unterstützt kein Browser Cross-Domain-Eventsource-Anfragen. Daher werden wir den zweiten Parameter in das Beispiel nicht aufnehmen.

Wenn die EventSource -Verbindung ge?ffnet ist, wird ein Ereignis ausgel?st. Wir k?nnen eine Funktion definieren, die das Ereignis übernimmt, indem wir die Eigenschaft

festlegen. open onopen

Wenn es ein Problem mit unserer Verbindung gibt, wird ein Fehler ausgel?st. Wir k?nnen die Eigenschaft

var evtsrc = new EventSource('./url_of/event_stream/');
evtsrc.onopen = function(openevent){
    // 連接打開時執(zhí)行的操作
}

verwenden, um eine Handlerfunktion für diese Ereignisse zu definieren. Wir werden die Ursachen einiger Fehlerereignisse im Abschnitt "Trainingsfehler" diskutieren.

onerror

Story -Ereignisse Standard für Nachrichtenereignisse. Um Nachrichtenereignisse zu verarbeiten, k?nnen wir das Attribut

evtsrc.onerror = function(openevent){
    // 發(fā)生錯誤時執(zhí)行的操作
}

verwenden, um eine Handlerfunktion zu definieren.

onmessage

Wir k?nnen auch

evtsrc.onmessage = function(openevent){
    // 接收到消息事件時執(zhí)行的操作
}

verwenden, um auf Ereignisse zuzuh?ren. Dies ist die einzige M?glichkeit, benutzerdefinierte Ereignisse zu behandeln, wie wir im Abschnitt Verarbeitungsereignisse sehen werden.

addEventListener()

Um die Verbindung zu schlie?en, verwenden Sie die Methode

var onerrorhandler = function(openevent){
    // 執(zhí)行的操作
}
evtsrc.addEventListener('error',onerrorhandler,false);

.

close()

Wir haben daher das EventSource -Objekt erstellt und den Handler für die Er?ffnung, Nachricht und Fehlerereignisse definiert. Damit diese Methode funktioniert, ben?tigen wir jedoch eine URL für Streaming -Ereignisse.

evtsrc.close();

Ereignisse vom Server senden

Der Server sendet das Ereignis ist ein Snippet von Text, der als Teil des Streams aus der URL geliefert wird. Damit der Browser unsere Daten als Stream behandelt, müssen wir:

Verwenden Sie den

-Header (Wert ist
• ), um Inhalte zu liefern Content-type Verwenden Sie die UTF-8-Zeichenkodierung. text/event-stream
• Die Syntax für den Server zum Senden von Ereignissen ist einfach. Es besteht aus einem oder mehreren dicker getrennten Feldname-Wert-Paaren, gefolgt von einem neuen Charakter. Der Feldname kann einen von vier m?glichen Werten enthalten.

: Die zugesandte Nachricht.

• data:: Die Art des Ereignisses wird versandt.
• event:: Die Ereigniskennung soll verwendet werden, wenn der Client wieder verbindet.
• id:: Wie viele Millisekunden sollten passieren, bevor der Browser versucht, sich wieder mit der URL zu verbinden.
• retry: Unter ihnen ist nur das Feld
erforderlich.

Meldungsereignis senden

In diesem Beispiel werden wir eine Veranstaltung senden, um bekannt zu geben, welche Teams in unseren Turnierspielen spielen. Wenn der Browser diesen Text empf?ngt, sendet er ein Meldungsereignis.

var evtsrc = new EventSource('./url_of/event_stream/',{withCredentials:false});

Der Wert des Felds

data wird zum Wert des data -attributs des Nachrichtereignisses. Wie oben erw?hnt, sendet der Server standardm??ig ein Ereignis, das ein Nachrichtenereignis ist. Aber wie wir sp?ter diskutieren werden, k?nnen wir auch benutzerdefinierte Ereignisse entsenden, indem wir das Feld event einbeziehen.

Wir k?nnen auch mehrere Daten als einzelnes Ereignis senden. Jede Daten sollte von einem neuen Zeilencharakter (Line Newline, Wagenrendite oder beides) folgen. Hier fügen wir eine Veranstaltung hinzu, die diesen Spielort und diese Teilnahme enth?lt.

var evtsrc = new EventSource('./url_of/event_stream/');
evtsrc.onopen = function(openevent){
    // 連接打開時執(zhí)行的操作
}

Für dieses Ereignis wird der Wert des data -attributs: Air Canada Centrentoronto, Ontario, Canadaattendance: 19.800 sein.

Bitte beachten Sie die leeren Zeilen zwischen den Ereignissen. Damit der Kunde eine Veranstaltung erhalten kann, muss die Veranstaltung von einer leeren Linie folgen. Kommentare beginnen mit einem Dickdarm.

Senden Sie benutzerdefinierte Ereignisse

Sofern wir nichts anderes angeben, ist die Art des Ereignisses eine Nachricht. Dazu müssen wir ein event Feld einbeziehen. Im folgenden Beispiel werden wir unserem Stream zwei startingfive Ereignisse hinzufügen und unsere Daten als Zeichenfolge im JSON -Format senden.

evtsrc.onerror = function(openevent){
    // 發(fā)生錯誤時執(zhí)行的操作
}

Hier müssen wir startingfive Ereignisse anstelle von Nachrichtenereignissen anh?ren. Unser data -Feld wird jedoch immer noch zum Wert der data Eigenschaft des Ereignisses.

Wir werden die data Eigenschaften und die MessageEvent -Schnittstelle im Abschnitt "Verarbeitung von Ereignissen" diskutieren.

Verbindungen verwalten und verbinden

wiederher

Obwohl der Server Ereignisse in den Browser schiebt, ist die Realit?t subtiler. Wenn der Server die Verbindung ge?ffnet h?lt, ist die EventSource -Anforderung eine erweiterte Anfrage. Wenn es geschlossen ist, wartet der Browser einige Sekunden vor der Wiederverbindung. Wenn die URL beispielsweise ein Dateiend-Tag sendet, kann die Verbindung geschlossen werden.

Jeder Browser hat sein eigenes Standardintervall. Die meisten werden nach 3 bis 6 Sekunden wieder verbinden. Sie k?nnen dieses Intervall jedoch steuern, indem Sie das Feld retry einbeziehen. Das Feld retry gibt an, wie viele Millisekunden der Kunde warten sollte, bevor sie sich wieder mit der URL verbinden. Lassen Sie uns unser Ereignis aus dem obigen Beispiel erstellen und ?ndern, um ein 5 -Sekunden -Intervall (5000 Millisekunden) zu enthalten.

evtsrc.onmessage = function(openevent){
    // 接收到消息事件時執(zhí)行的操作
}

Ereignisstr?me k?nnen aktiv gehalten werden, solange der Client verbunden ist. Abh?ngig von Ihrer Architektur und Anwendung m?chten Sie m?glicherweise, dass der Server die Verbindung regelm??ig schlie?t.

Setzen Sie eindeutige Kennung mit dem Feld ID

Wenn der Browser wieder mit der URL verbunden ist, empf?ngt er alle Daten, die am Verbindungspunkt verfügbar sind. Für das Scrolling -Display für Spielinformationen m?chten wir jedoch den Besucher wissen lassen, was er oder sie verpasst hat. Aus diesem Grund für die Best?tigung des ID für jedes Ereignis. Im folgenden Beispiel senden wir ID als Teil des Bewertungsereignisses.

var evtsrc = new EventSource('./url_of/event_stream/',{withCredentials:false});

Der Wert sollte für den Stream eindeutig sein. In diesem Fall verwenden wir die Zeit der Schussbewertung.

Das Feld

id wird zur lastEventId Eigenschaft dieses Ereignisobjekts. Aber es hat einen anderen Zweck. Wenn die Verbindung geschlossen ist, enth?lt der Browser einen Last-Event-ID -Header in seine n?chste Anfrage. Betrachten Sie es als Lesezeichen für den Stream. Wenn der Header Last-Event-ID vorhanden ist, k?nnen Sie die Antwort der Anwendung so anpassen, dass nur Ereignisse gesendet werden.

Verarbeitungsereignisse

Wie oben erw?hnt, sind alle Ereignisse für Nachrichtenereignisse standardm??ig. Jedes Nachrichtenereignis verfügt über drei Eigenschaften, die von der MessageEvent -Schnittstelle definiert sind.

Ereignis.Data

Gibt Daten oder Nachricht zurück, die als Teil des Nachrichtenereignisses gesendet wurden.

event.origin

Gibt die Quelle der Nachricht zurück, die normalerweise eine Zeichenfolge ist, die das Schema enth?lt, um die Nachricht zu senden (z. B. HTTP, HTTPS), Hostname und Port.

event.lastEventid

Gibt die eindeutige Kennung des letzten erhaltenen Ereignisses zurück.

Wenn ein Nachrichtenereignis ausgel?st wird, wird unsere onmessage -Funktion aufgerufen. Dies eignet sich hervorragend für Anwendungen, die Sie nur Nachrichtenereignisse senden. Wenn Sie jedoch eine Punktzahl oder ein startingfive -Ereignis senden m?chten (wie in unserem Beispiel gezeigt), werden seine Grenzen offensichtlich. Flexibler mit addEventListener. Im folgenden Code verwenden wir addEventListener, um das Ereignis startingfive zu verarbeiten.

var evtsrc = new EventSource('./url_of/event_stream/');
evtsrc.onopen = function(openevent){
    // 連接打開時執(zhí)行的操作
}

(zweiter Teil, stellen Sie aufgrund von Platzbeschr?nkungen bitte Fragen in Abs?tzen.)

Das obige ist der detaillierte Inhalt vonServer-Sent-Ereignisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!