HTML -SSE-API
Server-Sent Events (SSE) ermöglichen es einer Webseite, Updates von einem Server zu erhalten.
Vom Server gesendete Ereignisse – One-Way-Messaging
Ein vom Server gesendetes Ereignis liegt vor, wenn eine Webseite automatisch Updates von einem Server erhält.
Dies war auch vorher möglich, aber die Webseite musste fragen, ob Updates verfügbar waren. Bei vom Server gesendeten Ereignissen kommen die Updates automatisch.
Beispiele: Facebook/Twitter-Updates, Aktienkurs-Updates, 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 |
Empfangen Sie vom Server gesendete Ereignisbenachrichtigungen
Das EventSource-Objekt wird verwendet, um vom Server gesendete Ereignisbenachrichtigungen zu empfangen:
Beispiel
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
Beispiel erklärt:
- Erstellen Sie ein neues EventSource-Objekt und geben Sie die URL der Seite an, die die Updates sendet (in diesem Beispiel „demo_sse.php“).
- Jedes Mal, wenn ein Update empfangen wird, tritt das Ereignis onmessage auf
- Wenn ein onmessage-Ereignis auftritt, fügen Sie die empfangenen Daten in das Element mit id="result" ein
Ü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") {
// Yes! Server-sent events support!
// Some code.....
}
else {
// Sorry! No server-sent events support..
}
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.php):
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
Code in ASP (VB) (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>
Code erklärt:
- Setzen Sie den Header „Content-Type“ auf „text/event-stream“.
- Geben Sie an, dass die Seite nicht zwischengespeichert werden soll
- Ausgabe der zu sendenden Daten ( immer mit "data:" beginnen)
- Spülen Sie die Ausgabedaten zurück auf die Webseite
Das EventSource-Objekt
In den obigen Beispielen haben wir das Ereignis onmessage verwendet, um Nachrichten zu erhalten. Aber auch andere Veranstaltungen sind möglich:
| Events | Description |
|---|---|
| onopen | When a connection to the server is opened |
| onmessage | When a message is received |
| onerror | When an error occurs |