Implementierung der Push-Technologie mithilfe von Server-Sent-Ereignissen

Kernpunkte

• Die API von Server-Sent Events (SSE) implementiert Push-Technologie, und Daten werden durch kontinuierliche offene Verbindungen an den Client gestreamt, wodurch der Overhead der wiederholten Herstellung neuer Verbindungen vermieden wird.
• Im Gegensatz zu WebSockets, die eine bidirektionale Kommunikation ermöglichen, ermöglicht SSE den Server nur, Nachrichten an den Client zu bringen. SSE hat jedoch bestimmte Vorteile, z. B. Unterstützung für benutzerdefinierte Nachrichtentypen und automatische Wiederverbindung und Trennung.
• Clients können verschiedene Ereignisstypen im Ereignisstrom durchführen, indem sie benannte Ereignisse implementieren. Darüber hinaus kann der Ereignishandler von EventSource onerror Ereignis verwendet werden, um Fehler zu behandeln, und der Kunde kann die EventSource -Verbindung jederzeit beenden, indem er die close() -Methode aufruft.

Vergleich mit WebSockets

Viele Menschen sind sich der Existenz von SSEs völlig nicht bewusst, da sie oft durch die leistungsstärkere Websockets -API verdeckt werden. Obwohl WebSockets eine Zwei-Wege-Full-Duplex-Kommunikation zwischen dem Client und dem Server ermöglicht, ermöglicht SSE den Server nur, Nachrichten an den Client zu bringen. Anwendungen, die nahezu echte Zeitleistung oder eine Zwei-Wege-Kommunikation erfordern, sind möglicherweise besser für Websockets geeignet. SSE hat jedoch auch einige Vorteile gegenüber Websockets. Zum Beispiel unterstützt SSE benutzerdefinierte Nachrichtentypen und eine automatische Wiederverbindung. Diese Funktionen können in Websockets implementiert werden, sind jedoch standardmäßig in SSE verfügbar. Die WebSockets -Anwendung benötigt außerdem einen Server, der das WebSockets -Protokoll unterstützt. Im Gegensatz dazu basiert SSE auf HTTP und kann in einem Standard -Webserver implementiert werden.

Erkennungsunterstützung

sse unterstützt relativ hoch, und Internet Explorer ist der einzige große Browser, der sie noch nicht unterstützt. Solange der IE zurückbleibt, ist jedoch noch eine funktionelle Erkennung erforderlich. Auf dem Kunden verwendet SSE das EventSource -Objekt, um eine Eigenschaft des globalen Objekts zu implementieren. Die folgende Funktion erkennt, ob der EventSource -Konstruktor im Browser verfügbar ist. Wenn die Funktion wahr zurückgibt, kann SSE verwendet werden. Andernfalls sollte ein Sicherungsmechanismus wie Umfragen verwendet werden.

function supportsSSE() {
  return !!window.EventSource;
}

Verbindung

Um eine Verbindung zum Ereignisstrom herzustellen, rufen Sie den EventSource -Konstruktor wie unten gezeigt auf. Sie müssen die URL des Ereignisstroms angeben, um sich abonnieren. Der Konstruktor ist automatisch für das Öffnen der Verbindung verantwortlich.

EventSource(url);

onopen Ereignishandler

Nach der Erstellung der Verbindung wird der Ereignishandler von EventSource aufgerufen. Der Event -Handler eröffnet das Ereignis als einziger Parameter. Das folgende Beispiel zeigt einen gemeinsamen Ereignishandler. onopen onopen Der Eventsource -Event -Handler

kann auch mit der

source.onopen = function(event) {
  // 处理打开事件
};

-Methode geschrieben werden. Diese alternative Syntax ist besser als

, da mehrere Handler an demselben Ereignis angebracht werden können. Im Folgenden werden addEventListener() onopen den vorherigen addEventListener() Ereignishandler umgeschrieben. onopen

source.addEventListener("open", function(event) {
  // 处理打开事件
}, false);

Meldung empfangen

Der Client interpretiert den Ereignisstrom als eine Reihe von DOM -Nachrichtenereignissen. Jedes vom Server empfangene Ereignis löst den Ereignishandler für EventSource aus. onmessage Der Handler nimmt das Nachrichtenereignis als einziger Parameter. Das folgende Beispiel erstellt einen onmessage Ereignishandler. onmessage

function supportsSSE() {
  return !!window.EventSource;
}

Nachrichtenereignisse enthalten drei wichtige Eigenschaften - Daten, Herkunft und LastEventid. Wie der Name schon sagt, enthält Daten die tatsächlichen Nachrichtendaten (String -Format). Die Daten können eine JSON -Zeichenfolge sein und können an die Methode json.Parse () übergeben werden. Die Eigenschaft von Origin enthält die endgültige URL des Ereignisstroms nach allen Weiterleitungen. Die Herkunft sollte überprüft werden, um zu überprüfen, ob Nachrichten nur aus der erwarteten Quelle empfangen werden. Schließlich enthält die LastEventid -Eigenschaft die letzte Nachrichtenbekennung, die im Ereignisstrom zu sehen ist. Der Server kann diese Eigenschaft verwenden, um eine Kennung an einzelne Nachrichten anzuhängen. Wenn keine Kennung gesehen wurde, ist LastEventid eine leere Zeichenfolge. Der Ereignishandler

kann auch mit der onmessage -Methode geschrieben werden. Das folgende Beispiel zeigt den Ereignishandler addEventListener(), der mit addEventListener() umgestellt wurde. onmessage

EventSource(url);

naming Ereignis

Durch die Implementierung von

Namensereignis kann ein einzelner Ereignisstrom verschiedene Arten von Ereignissen angeben. Benannte Ereignisse werden vom Message Event -Handler nicht behandelt. Stattdessen wird jede Art von Benennungsereignis von seinem eigenen einzigartigen Handler behandelt. Wenn der Ereignisstrom beispielsweise ein Ereignis namens Foo enthält, ist der folgende Ereignishandler erforderlich. Beachten Sie, dass der FOO -Ereignishandler mit dem Message Event -Handler der gleiche ist, außer dass der Ereignisart unterschiedlich ist. Natürlich erfordert jede andere Art von benannten Nachrichten einen separaten Ereignishandler.

source.onopen = function(event) {
  // 处理打开事件
};

Verarbeitungsfehler

Wenn es ein Problem mit dem Ereignisfluss gibt, wird der Ereignishandler für EventSource ausgelöst. Eine häufige Ursache für Fehler ist die Verbindungsunterbrechung. Obwohl das EventSource -Objekt automatisch versucht, sich wieder mit dem Server zu verbinden, wird auch ein Fehlerereignis ausgelöst, wenn die Verbindung nicht verbunden ist. Das folgende Beispiel zeigt einen Ereignishandler.

onerror onerror Natürlich kann der

Ereignishandler auch mit

source.addEventListener("open", function(event) {
  // 处理打开事件
}, false);

wie unten gezeigt umgeschrieben werden.

onerror addEventListener()

trennen Sie

source.onmessage = function(event) {
  var data = event.data;
  var origin = event.origin;
  var lastEventId = event.lastEventId;
  // 处理消息
};

Der Client kann die EventSource -Verbindung jederzeit beenden, indem er die Methode aufruft. Die Syntax von

ist unten gezeigt. Die

-Methode akzeptiert keine Parameter und gibt keinen Wert zurück. close() close() close()

Verbindungsstatus

source.addEventListener("message", function(event) {
  var data = event.data;
  var origin = event.origin;
  var lastEventId = event.lastEventId;
  // 处理消息
}, false);

Der Status der EventSource -Verbindung wird in seiner ReadyState -Immobilie gespeichert. Zu jedem Zeitpunkt seines Lebenszyklus kann eine Verbindung in einem von drei möglichen Zuständen sein - in und aus. Die folgende Liste beschreibt jeden Zustand.

• Verbindung - Wenn ein EventSource -Objekt erstellt wird, wird zunächst den Verbindungszustand eingetragen. In dieser Zeit wurde die Verbindung nicht hergestellt. Wenn eine etablierte Verbindung verloren geht, wechselt EventSource auch zum Verbindungszustand. Der ReadyState -Wert von EventSocket in der Verbindung beträgt 0. Dieser Wert ist definiert als die konstante EreignisOsource.Connecting.
• Öffnen - Eine etablierte Verbindung wird als offen bezeichnet. Ein offenes EventSource -Objekt kann Daten empfangen. Der ReadyState -Wert von 1 entspricht dem offenen Zustand. Dieser Wert ist definiert als die konstante Ereignisource.open.
• schließen - Wenn nicht eine Verbindung hergestellt und keine Wiederverbindung versucht wird, wird die Ereignisurce als geschlossen bezeichnet. Dieser Zustand wird normalerweise eingegeben, indem die Methode close() aufgerufen wird. Der ReadyState -Wert der Eventsource in einem geschlossenen Zustand beträgt 2. Dieser Wert ist definiert als das konstante Ereignis.

Das folgende Beispiel zeigt, wie Sie eine EventSource -Verbindung mithilfe der ReadyState -Eigenschaft überprüfen. Um hartcodierte ReadyState-Werte zu vermeiden, verwendet dieses Beispiel Zustandskonstanten.

function supportsSSE() {
  return !!window.EventSource;
}

Schlussfolgerung

In diesem Artikel wird die Kundenaspekte von SSE eingeführt. Wenn Sie mehr über SSE erfahren möchten, empfehle ich Ihnen, Server SSE zu lesen. Ich habe auch einen praktischeren Artikel über SSE in node.js. genießen!

Häufig gestellte Fragen zur Verwendung von SSE zur Implementierung von Push -Technologien (FAQ)

Was sind die Voraussetzungen für die Implementierung von SSE?

Um SSE zu implementieren, benötigen Sie ein grundlegendes Verständnis von JavaScript und Node.js. Sie sollten auch mit dem Konzept von HTTP vertraut sein und wie es funktioniert. Darüber hinaus kann das Verständnis der ereignisorientierten Programmierung von Vorteil sein, da SSE auf diesem Konzept basiert.

Wie unterscheidet sich SSE von Websockets?

Während sowohl SSE als auch Websockets Echtzeitdatenaktualisierungen bereitstellen, variieren ihre Funktionen und Anwendungsfälle. WebSockets bietet einen wechselseitigen Kommunikationskanal zwischen dem Client und dem Server, sodass beide Parteien Daten jederzeit senden können. Auf der anderen Seite ist SSE ein Einweg-Kommunikationskanal, bei dem nur der Server Aktualisierungen an den Client weitergeben kann. Dies macht SSE besser für Anwendungen geeignet, bei denen Datenaktualisierungen hauptsächlich von Servern initiiert werden.

Kann SSE mit einer serverseitigen Sprache verwendet werden?

Ja, SSE kann mit jeder HTTP-fähigen serverseitigen Sprache verwendet werden. Dies umfasst Sprachen wie Node.js, Python, PHP und Ruby. Der Schlüssel besteht darin, den richtigen HTTP -Header festzulegen und die Daten gemäß der SSE -Spezifikation zu formatieren.

Wie kann man mit Verbindungsfehlern oder Interrupts in SSE umgehen?

Die EventSource -API, mit der SSE im Client implementiert wurde, versucht automatisch, sich wieder mit dem Server zu verbinden, wenn die Verbindung verloren geht. Sie können auch auf das Ereignisereignis auf dem EventSource -Objekt anhören, um Verbindungsfehler oder Interrupts manuell zu behandeln.

Kann ich SSE verwenden, um Daten vom Client an den Server zu senden?

Nein, SSE ist für eine Einweg-Kommunikation vom Server zum Client vorgesehen. Wenn Sie Daten vom Client an den Server senden müssen, können Sie herkömmliche AJAX-Anfragen verwenden oder zu zwei-Wege-Kommunikationstechnologien wie WebSockets wechseln.

unterstützt SSE alle Browser?

Die meisten modernen Browser unterstützen SSE. Internet Explorer unterstützt jedoch keine SSE. Sie können Polyfills wie EventSource.js verwenden, um die SSE in nicht unterstützten Browsern zu unterstützen.

Wie schließt man die SSE -Verbindung?

Sie können die SSE -Verbindung schließen, indem Sie die Methode close() im EventSource -Objekt aufrufen. Dies verhindert, dass der Server mehr Aktualisierungen an den Client sendet.

Kann ich SSE für Echtzeitanwendungen mit mehreren Benutzern verwenden?

Ja, Sie können SSE für Echtzeitanwendungen mit mehreren Benutzern verwenden. Denken Sie jedoch daran, dass jeder Benutzer eine separate Verbindung zum Server öffnet. Wenn Sie eine große Anzahl von Benutzern haben, kann dies zu einer übermäßigen Last Server führen.

Wie kann ich SSE verwenden, um verschiedene Arten von Ereignissen zu senden?

Sie können verschiedene Arten von Ereignissen senden, indem Sie das Feld "Ereignis" in die vom Server gesendeten Daten einbeziehen. Der Client kann dann auf diese spezifischen Ereignistypen anhören, indem er die addEventListener() -Methode im EventSource -Objekt verwendet.

Kann ich SSE mit REST -API verwenden?

Ja, Sie können SSE mit der Rest -API verwenden. Der Server kann Updates an den Client senden, wenn sich die Ressourcen ändert. Dies ist nützlich, um den Client und den Serverstatus ohne Abfragen synchronisiert zu halten.

Das obige ist der detaillierte Inhalt vonImplementierung der Push-Technologie mithilfe von Server-Sent-Ereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!