So verwenden Sie Server-Sent-Ereignisse in node.js

Kernpunkte

• Server Senden Ereignisse (SSE) ermöglicht es dem Server, Daten jederzeit in den Browser zu bringen und Funktionen wie Echtzeit-Nachrichtenberichte, Wettervorhersagen und Aktienkurse zu aktivieren. Der Browser stellt eine erste Anfrage zur Herstellung einer Verbindung aus, und der Server hält die Verbindung geöffnet, um eine Textnachricht zu senden.
• SSE ist einfacher als WebSockets, verwendet Standard-HTTP, unterstützt die Einweg-Kommunikation und bietet eine automatische Wiederverbindung. Der Server kann die SSE -Antwort jederzeit beenden. Wenn die Verbindung jedoch unterbrochen wird, versucht der Browser automatisch, sich wieder zu verbinden.
• Der Server kann eine beliebige Anzahl von SSE -Kanal -URLs oder eine einzelne Endpunkt -URL bereitstellen. Nachrichten vom Server haben möglicherweise Ereignisse zugeordnet, um eine bestimmte Art von Informationen zu identifizieren. Der Server kann nach der Datenzeile auch eine ID senden, um alle verpassten Nachrichten wiederzugeben, wenn die Verbindung nicht verbunden ist.
• Der Browser kann die SSE -Kommunikation unter Verwendung der Methode .close () des EventSource -Objekts beenden. Der Server kann die Verbindung durch Auslösen von res.end () oder eine Wiederholungsverzögerung beenden und dann einen HTTP -Status 204 zurückgeben, wenn derselbe Browser versucht, sich wieder zu verbinden. Nur Browser können die Verbindung wiederherstellen, indem sie ein neues EventSource-Objekt erstellen.

In diesem Artikel wird untersucht, wie Sie Server -Send -Ereignisse (SSE) verwenden, um Clients über eine HTTP -Verbindung automatische Aktualisierungen vom Server zu erhalten. Wir werden auch seine Verwendung untersuchen und eine praktische Demonstration zeigen, wie Node.js verwendet werden, um Ereignisse mit einem Server zu senden.

• Vorteile des Serversendens von Ereignissen
• Schneller Start des Servers senden Ereignisse
  • Wichtige Tipps
• erweitertes Server senden Ereignis
  • einzelne und mehrere SSE -Kanäle
  • Senden Sie verschiedene Daten auf einem einzelnen Kanal
  • Verwenden von Datenkennung
  • RETRY DELAY GESCHAFT
  angeben
  • Andere Ereignishandler
  • SSE -Kommunikation
  beenden
• Schlussfolgerung

Vorteile des Server -Senden -Ereignisses

Web antworten Sie auf HTTP-Nachrichten basierend auf Anfrage-Response. Ihr Browser stellt eine URL -Anforderung aus und der Server gibt Daten zurück. Dies kann dazu führen, dass der Browser mehr Anfragen an Bildern, CSS, JavaScript usw. stellt, und der Server antwortet. Der Server kann keine aktiven Nachrichten an den Browser senden. Wie zeigt er also an, dass die Daten geändert wurden? Glücklicherweise können Sie Server Senden -Ereignisse (SSE) verwenden, um Funktionen wie Live -Nachrichtenveröffentlichungen, Wettervorhersagen und Aktienkurse hinzuzufügen.

Es war immer möglich, Standard-Web-Technologien zu verwenden, um Echtzeitdatenaktualisierungen zu erreichen:

• Die Web -Web mit voller Seite oder Frame/Iframe.
• Das Web der 2000er Jahre führte AJAX ein, das lange Umfragen verwenden kann, um Daten anzufordern und die entsprechenden DOM -Elemente mit neuen Informationen zu aktualisieren.

Keine dieser Optionen ist ideal, da der Browser eine Aktualisierung auslösen muss. Wenn es zu oft Anfragen stellt, gibt es keine Datenänderungen, sodass sowohl der Browser als auch der Server unnötige Arbeit leisten. Wenn es zu langsam umfragt, kann es wichtige Aktualisierungen verpassen und der von Ihnen verfolgte Aktienkurs ist gesunken!

Server Senden Ereignisse (SSE) ermöglicht es dem Server, Daten jederzeit in den Browser zu drücken:

• Der Browser stellt immer noch eine erste Anfrage, um die Verbindung herzustellen.
• Der Server gibt eine Ereignisstromantwort zurück und hält die Verbindung geöffnet.
• Der Server kann diese Verbindung verwenden, um Textnachrichten jederzeit zu senden.
• Eingehende Daten werden im Browser ein JavaScript -Ereignis anbringen. Die Ereignishandlerfunktion analysiert die Daten und aktualisiert das DOM.

im Wesentlichen ist SSE ein unbegrenzter Datenstrom. Stellen Sie sich vor, eine unendlich große Datei, die in kleinen Stücken heruntergeladen wird, die Sie abfangen und lesen können.

sse wurde ursprünglich im Jahr 2006 implementiert und unterstützt diesen Standard in allen großen Browsern. Es ist möglicherweise nicht als Websockets bekannt, aber der Server sendet Ereignisse einfacher, verwendet Standard-HTTP, unterstützt eine Einweg-Kommunikation und bietet eine automatische Wiederverbindung. Dieses Tutorial enthält einen Beispiel-Node.js-Code ohne Module von Drittanbietern, aber SSE kann in anderen serverseitigen Sprachen, einschließlich PHP, verwendet werden.

Schneller Start des Servers senden Ereignisse

Die folgende Demonstration implementiert einen Node.js -Webserver, der zufällige Zahlen zwischen 1 und 1000 in zufälligen Intervallen von mindestens alle drei Sekunden ausgibt.

finden Sie hier unsere Node.js SSE -Demo.

Dieser Code verwendet den Standard -Node.js HTTP- und URL -Module, um einen Webserver zu erstellen und URL zu analysieren:

<code class="language-javascript">import http from "node:http";
import url from "node:url";</code>

Der Server prüft nach eingehenden URL -Anforderungen und reagiert bei der Begegnung auf den /zufälligen Pfad:

<code class="language-javascript">const port = 8000;

http.createServer(async (req, res) => {

  // 获取 URI 路径
  const uri = url.parse(req.url).pathname;

  // 返回响应
  switch (uri) {
    case "/random":
      sseStart(res);
      sseRandom(res);
      break;
  }

}).listen(port);

console.log(`server running: http://localhost:${port}\n\n`);</code>

Es reagiert zunächst mit dem SSE HTTP -Ereignisstrom -Header:

<code class="language-javascript">// SSE 头
function sseStart(res) {
  res.writeHead(200, {
    Content-Type: "text/event-stream",
    Cache-Control: "no-cache",
    Connection: "keep-alive"
  });
}</code>

Eine andere Funktion sendet dann eine Zufallszahl und ruft sich nach dem Zufallsintervall auf:

<code class="language-javascript">// SSE 随机数
function sseRandom(res) {
  res.write("data: " + (Math.floor(Math.random() * 1000) + 1) + "\n\n");
  setTimeout(() => sseRandom(res), Math.random() * 3000);
}</code>

Wenn Sie Ihren Code lokal ausführen, können Sie Curl in Ihrem Terminal verwenden, um die Antwort zu testen:

<code class="language-bash">$> curl -H Accept:text/event-stream http://localhost:8000/random
data: 481

data: 127

data: 975</code>

drücken Sie Strg |. Der Client -JavaScript von Browser verbindet mit dem EventSource -Objektkonstruktor mit /zufälliger URI:

eingehende Daten löst den Meldungsereignishandler aus, wobei Daten: die Zeichenfolge nach der verfügbaren .data -Eigenschaft des Ereignisobjekts verfügbar ist:

<code class="language-javascript">// 客户端 JS
const source = new EventSource("/random");</code>

Wichtige Tipps

<code class="language-javascript">source.addEventListener('message', e => {
  console.log('RECEIVED', e.data);
});</code>

Wie Fetch () gibt der Browser Standard -HTTP -Anforderungen aus, sodass Sie möglicherweise CSP, CORS verarbeiten müssen, und haben die Möglichkeit, einen zweiten

-Parameter an den EventSource -Konstruktor zu übergeben, um einen Cookie zu senden.

Der Server muss ein separates Res -Antwortobjekt für jeden angeschlossenen Benutzer aufbewahren, um Daten an ihn zu senden. Dies wird im obigen Code erreicht, indem der Wert für den nächsten Anruf an die Schließung weitergegeben wird.
• { withCredentials: true } Nachrichtendaten können nur eine Zeichenfolge in den Formatdaten sein:
nn (wahrscheinlich JSON). Es ist entscheidend, die Wagenrendite zu beenden.
• Der Server kann die SSE -Antwort jederzeit mit res.end () beenden, aber ... Wenn die Verbindung unterbrochen wird, versucht der Browser automatisch, sich wieder zu verbinden.
• Der erweiterte Server sendet Ereignisse

sse benötigt nicht mehr Code als oben gezeigt, aber in den folgenden Abschnitten werden andere Optionen erörtert.

einzelne und mehrere SSE -Kanäle

Der Server kann eine beliebige Anzahl von SSE -Kanal -URLs bereitstellen. Zum Beispiel:

• /letztes/news
• /letztes/wetter
• /letztes/stockprice

Dies kann praktisch sein, wenn eine einzelne Seite ein Thema anzeigt, jedoch nicht, wenn eine einzelne Seite Nachrichten, Wetter und Aktienkurse zeigt. In diesem Fall muss der Server drei Verbindungen für jeden Benutzer verwalten, was bei zunehmendem Verkehr Speicherprobleme verursachen kann.

Eine andere Option ist die Bereitstellung einer einzelnen Endpunkt -URL, wie z. Der Browser kann das interessierende Thema an der URL -Abfragezeichenfolge angeben, wie z.

Senden Sie verschiedene Daten auf einem einzelnen Kanal

Nachrichten vom Server können über die event: -Leile übergeben werden, um eine bestimmte Art von Informationen zu identifizieren: data:

<code class="language-javascript">import http from "node:http";
import url from "node:url";</code>

Dies auslösen den Ereignishandler des Clients nicht aus. Sie müssen einen Handler für jede Art von Ereignis hinzufügen. Zum Beispiel:

<code class="language-javascript">const port = 8000;

http.createServer(async (req, res) => {

  // 获取 URI 路径
  const uri = url.parse(req.url).pathname;

  // 返回响应
  switch (uri) {
    case "/random":
      sseStart(res);
      sseRandom(res);
      break;
  }

}).listen(port);

console.log(`server running: http://localhost:${port}\n\n`);</code>

Verwenden von Datenkennung

Der Server kann auch nach der

Zeile data:: id: senden

<code class="language-javascript">// SSE 头
function sseStart(res) {
  res.writeHead(200, {
    Content-Type: "text/event-stream",
    Cache-Control: "no-cache",
    Connection: "keep-alive"
  });
}</code>

Wenn die Verbindung nicht verbunden ist, sendet der Browser die letzte ID im Server im HTTP-Header in der letzten Event-ID zurück, damit der Server alle verpassten Nachrichten wiedergeben kann.

Die neueste ID ist auch in der .lastEventid -Eigenschaft des Ereignisobjekts des Clients verfügbar:

<code class="language-javascript">// SSE 随机数
function sseRandom(res) {
  res.write("data: " + (Math.floor(Math.random() * 1000) + 1) + "\n\n");
  setTimeout(() => sseRandom(res), Math.random() * 3000);
}</code>

RETRY DELAGE GESCHAFT

angeben

Obwohl die Wiederverbindung automatisch ist, weiß Ihr Server möglicherweise, dass für einen bestimmten Zeitraum keine neuen Daten benötigt werden, sodass keiner aktiven Kommunikationskanal beibehalten werden müssen. Der Server kann eine

Antwort auf sich selbst oder als Teil der endgültigen Nachricht senden, die den Millisekundenwert enthält. Zum Beispiel: retry:

<code class="language-bash">$> curl -H Accept:text/event-stream http://localhost:8000/random
data: 481

data: 127

data: 975</code>

Nach dem Empfang wird der Browser die SSE -Verbindung aufgeben und versuchen, nach Ablauf der Verzögerungszeit wieder zu verbinden.

Andere Ereignishandler

Zusätzlich zu "Nachricht" und benannten Ereignissen können Sie auch "offene" und "Fehler" -Handler in Client JavaScript erstellen.

Wenn die Serververbindung hergestellt wird, wird das "offene" Ereignis ausgelöst. Es kann verwendet werden, um andere Konfigurationscode auszuführen oder DOM -Elemente zu initialisieren:

<code class="language-javascript">// 客户端 JS
const source = new EventSource("/random");</code>

Wenn die Serververbindung fehlschlägt oder endet, wird das "Fehler" -Ereignis ausgelöst. Sie können die Eventphase -Eigenschaft des Ereignisobjekts überprüfen, um zu sehen, was los ist:

<code class="language-javascript">source.addEventListener('message', e => {
  console.log('RECEIVED', e.data);
});</code>

Denken Sie daran, dass es nicht erforderlich ist, sich wieder zu verbinden:

Es wird automatisch geschehen. SSE -Kommunikation

beenden

Der Browser kann die SSE -Kommunikation unter Verwendung der Methode .close () des EventSource -Objekts beenden. Zum Beispiel:

Der Server kann die Verbindung beenden nach:

<code>event: news
data: SSE is great!

event: weather
data: { "temperature": "20C", "wind": "10Kph", "rain": "25%" }

event: stock
data: { "symbol": "AC", "company": "Acme Corp", "price": 123.45, "increase": -1.1 }</code>

1. Trigger res.end () oder senden retry: Verzögerung, dann
2. Gibt den HTTP -Status 204 zurück, wenn derselbe Browser wieder verbinden versucht.

Nur Browser können Verbindungen wiederherstellen, indem sie ein neues EventSource-Objekt erstellen.

Schlussfolgerung

serverseitige Ereignisse bieten eine Möglichkeit, Echtzeit-Seitenaktualisierungen zu implementieren, was möglicherweise einfacher, praktischer und leichter ist als Fetch ()-basierte AJAX-Umfragen. Die Komplexität liegt auf der Serverseite. Sie müssen:

1. Halten Sie alle aktiven Verbindungen des Benutzers im Speicher und
2. Triggerdatenübertragung bei Änderungen.

, aber dies steht vollständig unter Ihrer Kontrolle, und die Erweiterung sollte nicht komplexer sein als jede andere Webanwendung.

Der einzige Nachteil ist, dass SSE Sie nicht erlaubt, Nachrichten aus dem Browser an den Server zu senden (mit Ausnahme der anfänglichen Verbindungsanforderung). Sie können AJAX verwenden, aber dies ist für Anwendungen wie Action Games zu langsam. Für eine ordnungsgemäße bidirektionale Kommunikation benötigen Sie Websockets. In node.js finden Sie eine Live -Anwendung mit WebSockets, um mehr zu erfahren!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Server-Sent-Ereignisse in node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!