Server-Sent Events ermöglichen eine Web-Seite, um Updates von einem Server.
Server-Sent Events - One Way Messaging
Ein Server gesendet Ereignis ist, wenn eine Web-Seite automatisch Updates von einem Server erhält.
Dies war auch vor möglich, aber die Webseite würde fragen, ob Updates verfügbar war. Mit Server gesendeten Ereignisse, kommen die Updates automatisch.
Beispiele: Facebook/Twitter - Updates, Aktienkurs - Updates, News Feeds, Sportergebnisse etc.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die vollständig server gesendet Ereignisse unterstützen.
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | Nicht unterstützt | 6.0 | 5.0 | 11.5 |
Erhalten Server-Sent Ereignisbenachrichtigungen
Das EventSource Objekt wird verwendet server gesendet Ereignisbenachrichtigungen zu erhalten:
Beispiel
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
}; Versuch es selber " Beispiel erläutert werden:
- Erstellen Sie ein neues EventSource Objekt, und geben Sie die URL der Seite , die Updates zu senden (in this example "demo_sse.php")
- Jedes Mal , wenn ein Update erhalten wird, das onmessage Ereignis eintritt
- Wenn ein onmessage Ereignis auftritt, setzt die empfangenen Daten in das Element mit id="result"
Überprüfen Sie Server-Sent Events Support
Im tryit obiges Beispiel gab es einige zusätzliche Zeilen Code - Browser - Unterstützung für Server gesendet Ereignisse zu überprüfen:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
} else {
// Sorry! No server-sent events support..
}
Server-Side-Code Beispiel
Für das obige Beispiel zu arbeiten, benötigen Sie einen Server (wie PHP oder ASP), das Daten-Updates zu senden.
Die serverseitige Ereignisstrom-Syntax, ist einfach. Stellen Sie den "Content-Type" Header "text/event-stream" . Jetzt können Sie das Senden Ereignisströme 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:
- Stellen Sie den "Content-Type" Header "text/event-stream"
- Gibt an, dass die Seite nicht zwischenspeichern soll
- Ausgabe der Daten zu senden ( Always start with "data: ")
- Spülen Sie die Ausgangsdaten zurück zu der Web-Seite
Das Objekt Eventsource
In den obigen Beispielen verwendeten wir die onmessage Ereignismeldungen zu erhalten. Aber auch andere Veranstaltungen stehen ebenfalls zur Verfügung:
| Veranstaltungen | Beschreibung |
|---|---|
| onopen | Wenn eine Verbindung mit dem Server geöffnet |
| onmessage | Wenn eine Nachricht empfangen |
| onerror | Wenn ein Fehler auftritt |