Server-Sent-Ereignisse

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){
    // 连接打开时执行的操作
}

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){
    // 发生错误时执行的操作
}

verwenden, um eine Handlerfunktion zu definieren.

onmessage

Wir können auch

evtsrc.onmessage = function(openevent){
    // 接收到消息事件时执行的操作
}

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){
    // 执行的操作
}
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){
    // 连接打开时执行的操作
}

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){
    // 发生错误时执行的操作
}

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){
    // 接收到消息事件时执行的操作
}

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){
    // 连接打开时执行的操作
}

(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!