HTML SSE API
Server-Sent Events (SSE) ermöglichen es einer Webseite, Aktualisierungen von einem Server abzurufen.
Server-Sent Events — One-Way-Messaging
Ein vom Server gesendetes Ereignis liegt vor, wenn eine Webseite automatisch Aktualisierungen von einem Server erhält.
Das war früher auch möglich, allerdings musste die Webseite nachfragen, ob Updates verfügbar sind. Bei vom Server gesendeten Ereignissen erfolgen die Aktualisierungen automatisch.
Beispiele: Facebook-/Twitter-Updates, Aktienkursaktualisierungen, Newsfeeds, Sportergebnisse usw.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die vom Server gesendete Ereignisse vollständig unterstützt.
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
Erhalten Sie vom Server gesendete Ereignisbenachrichtigungen
Das EventSource-Objekt wird verwendet, um vom Server gesendete Ereignisbenachrichtigungen zu empfangen:
Beispiel
var source = new EventSource("demo_sse.html");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
Try it Yourself »
Beispiel erklärt:
- Erstellen Sie ein neues EventSource-Objekt und geben Sie die URL der Seite an, die die Aktualisierungen sendet (in diesem Beispiel) "demo_sse.html")
- Jedes Mal, wenn ein Update empfangen wird, tritt das onmessage-Ereignis auf
- Wenn ein onmessage-Ereignis auftritt, fügen Sie die empfangenen Daten in das Element mit ein id="result"
Überprüfen Sie die Unterstützung für vom Server gesendete Ereignisse
Im obigen Tryit-Beispiel gab es einige zusätzliche Codezeilen, um die Browserunterstützung für vom Server gesendete Ereignisse zu überprüfen:
if(typeof(EventSource) !== "undefined") {
// Ja! Unterstützung für vom Server gesendete Ereignisse!
// Etwas Code.....
} else {
// Entschuldigung! Keine Unterstützung für vom Server gesendete Ereignisse.
}
Beispiel für serverseitigen Code
Damit das obige Beispiel funktioniert, benötigen Sie einen Server, der Datenaktualisierungen senden kann (wie PHP oder ASP)..
Die Syntax des serverseitigen Ereignisstroms ist einfach. Setzen Sie den Header "Content-Type" auf "text/event-stream". Jetzt können Sie mit dem Senden von Ereignisströmen beginnen.
Code in PHP (demo_sse.html):
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: Die Serverzeit beträgt: {$time}\n\n";
flush();
?>
Code in ASP (VB) (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: Die Serverzeit beträgt: " & now())
Response.Flush()
%>
Code explained:
- Setzen Sie den Header "Content-Type" auf "text/event-stream"
- Geben Sie an, dass die Seite nicht zwischengespeichert werden soll
- Geben Sie die zu sendenden Daten aus (Immer beginnen mit "data: ")
- Schreiben Sie die Ausgabedaten zurück auf die Webseite
Das EventSource-Objekt
In den obigen Beispielen haben wir das Ereignis „onmessage“ verwendet, um Nachrichten abzurufen. Aber auch andere Veranstaltungen sind möglich:
| Veranstaltungen | Beschreibung |
|---|---|
| onopen | Wenn eine Verbindung zum Server geöffnet wird |
| onmessage | Wenn eine Nachricht empfangen wird |
| onerror | Wenn ein Fehler auftritt |
