English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 Server-Send-Ereignisse (server-sent event) ermöglicht es der Webseite, die neuesten Daten vom Server zu erhalten, ohne die Seite neu zu laden, und die neuesten Daten dynamisch abzurufen.
Server-Gesendete Ereignisse beziehen sich auf die automatische Übermittlung von Datenaktualisierungen vom Server zur Webseite.
Die traditionellen Methoden zur Erzielung der neuesten Daten von Servern sind das Aktualisieren oder das Auslösen eines Timers, um die neuesten Daten zu erhalten. Und jetzt können Sie über Server-Send-Ereignisse Server-Durch das Senden eines Ereignisses können Sie automatisch die neuesten Daten abrufen.
Beispiel: Facebook/Twitter-Updates, Börsenkurse, Weibo, Sportergebnisse, dynamische Nachrichten, Kommentare usw.
Alle gängigen Browser unterstützen Server-Send-Ereignisse, mit Ausnahme von Internet Explorer.
Das EventSource-Objekt wird verwendet, um Benachrichtigungen von Servern zu empfangen:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Grundlagen-Tutorial-Website(oldtoolbag.com)</title> </head> <body> <h1>Erhalten Sie die neuesten Daten vom Server</h1> <div id="result"></div> <script> if(typeof(EventSource)!=="undefined") { var source=new EventSource("demo-sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>"; }; } else { document.getElementById("result").innerHTML="Entschuldigung, Ihr Browser unterstützt server-sent Ereignis..."; } </script> </body> </html>Testen Sie es heraus ‹/›
Beispielanalyse:
Erstellen Sie ein neues EventSource-Objekt und legen Sie die URL der Seite fest, von der die Aktualisierungen gesendet werden (im Beispiel "demo_sse.php")
Bei jedem Empfangen einer Aktualisierung tritt das onmessage-Ereignis auf
Wenn der onmessage-Ereignisvorgang auftritt, wird das empfangene Daten in das Element mit der ID "result" eingefügt
In den folgenden Beispielen schreiben wir zusätzlichen Code, um die Unterstützung des Browsers für das Senden von Ereignissen durch den Server zu überprüfen:
if(typeof(EventSource)!=="undefined") { // Der Browser unterstützt Server-Gesendet // Einige Code..... } else { // Der Browser unterstützt Server-Gesendet.. }
Um den obigen Beispielcode auszuführen, benötigen Sie auch die Möglichkeit, Datenaktualisierungen von einem Server zu senden (z.B. PHP und ASP).
Der Syntax des Serverseitigen Ereignisstroms ist sehr einfach. Setzen Sie "Content-Type" Header wird auf "text/event-stream". Jetzt können Sie mit dem Senden von Ereignisströmen beginnen.
<?php header(&39;Content-Type: text/event-stream&39;); header(&39;Cache-Control: no-cache&39;); $time = date(&39;r&39;); echo "data: The server current time: {$time}\n\n"; flush(); ?>
ASP 代码 (VB) (demo_sse.asp):
<%} Response.ContentType="text/event-stream" Response.Expires=-1 Response.Write("data: The server current time" & now()) Response.Flush() %>
Codeerklärung:
Setzen Sie den Header "Content-"Type" auf "text" setzen/event-stream"
Seite nicht zwischenspeichern
Senden des Datums der Übertragung (immer mit "data: " beginnt)
Daten zur Aktualisierung der Webseite senden
In den obigen Beispielen verwenden wir das onmessage-Ereignis, um Nachrichten zu erhalten. Es können jedoch auch andere Ereignisse verwendet werden:
Ereignis | Beschreibung |
onopen | Wenn die Verbindung zum Server geöffnet wird |
onmessage | Wenn eine Nachricht empfangen wird |
onerror | Wenn ein Fehler auftritt |