Kernpunkte
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 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:
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:
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:
import http from "node:http"; import url from "node:url";
Der Server prüft nach eingehenden URL -Anforderungen und reagiert bei der Begegnung auf den /zufälligen Pfad:
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`);Es reagiert zunächst mit dem SSE HTTP -Ereignisstrom -Header:
// SSE 头
function sseStart(res) {
res.writeHead(200, {
Content-Type: "text/event-stream",
Cache-Control: "no-cache",
Connection: "keep-alive"
});
}Eine andere Funktion sendet dann eine Zufallszahl und ruft sich nach dem Zufallsintervall auf:
// SSE 随机数
function sseRandom(res) {
res.write("data: " + (Math.floor(Math.random() * 1000) + 1) + "\n\n");
setTimeout(() => sseRandom(res), Math.random() * 3000);
}Wenn Sie Ihren Code lokal ausführen, können Sie Curl in Ihrem Terminal verwenden, um die Antwort zu testen:
$> curl -H Accept:text/event-stream http://localhost:8000/random data: 481 data: 127 data: 975
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:
// 客户端 JS
const source = new EventSource("/random");
source.addEventListener('message', e => {
console.log('RECEIVED', e.data);
});{ withCredentials: true } Nachrichtendaten können nur eine Zeichenfolge in den Formatdaten sein: sse benötigt nicht mehr Code als oben gezeigt, aber in den folgenden Abschnitten werden andere Optionen erörtert.
Der Server kann eine beliebige Anzahl von SSE -Kanal -URLs bereitstellen. Zum Beispiel:
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.
Nachrichten vom Server können über die event: -Leile übergeben werden, um eine bestimmte Art von Informationen zu identifizieren: data:
import http from "node:http"; import url from "node:url";
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`); Zeile data:: id: senden
// SSE 头
function sseStart(res) {
res.writeHead(200, {
Content-Type: "text/event-stream",
Cache-Control: "no-cache",
Connection: "keep-alive"
});
}Die neueste ID ist auch in der .lastEventid -Eigenschaft des Ereignisobjekts des Clients verfügbar:
// SSE 随机数
function sseRandom(res) {
res.write("data: " + (Math.floor(Math.random() * 1000) + 1) + "\n\n");
setTimeout(() => sseRandom(res), Math.random() * 3000);
} Antwort auf sich selbst oder als Teil der endgültigen Nachricht senden, die den Millisekundenwert enthält. Zum Beispiel: retry:
$> curl -H Accept:text/event-stream http://localhost:8000/random data: 481 data: 127 data: 975
Andere Ereignishandler
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:
// 客户端 JS
const source = new EventSource("/random");
source.addEventListener('message', e => {
console.log('RECEIVED', e.data);
});Es wird automatisch geschehen. SSE -Kommunikation
beendenDer 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>retry: Verzögerung, dann 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:
, 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!
http 400 Ungültige Anfrage
Implementierungsmethode für die Android-Sprachwiedergabefunktion
Verwendung des Velocitytrackers
securefx kann keine Verbindung herstellen
Offizieller Website-Eingang der Okx-Handelsplattform
Hauptanwendungen des Linux-Betriebssystems
Metasuchmaschine
So führen Sie Code mit vscode aus
So führen Sie ein PHPStudy-Projekt aus
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
