HTML Server-Sent-Events

Server-Sent-Events ermöglichen es der Webseite, Updates vom Server zu erhalten.

Server-Sent-Events - Einbahn-Messaging

Server-Sent-Events beziehen sich auf das automatische Erhalten von Updates durch die Webseite vom Server.

Dies könnte auch früher erreicht werden, vorausgesetzt, die Webseite musste nach verfügbaren Updates fragen. Mit Server-Sent-Events können Updates automatisch erreicht werden.

Zum Beispiel: Facebook/Twitter-Updates, Börsenkurs-Updates, neue Blog-Posts, Sportergebnisse usw.

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf den ersten Browser hin, der Server-Sent-Events vollständig unterstützt.

API
SSE 6.0 Nicht unterstützt 6.0 5.0 11.5

Benachrichtigungen von Server-Sent-Events empfangen

Das EventSource-Objekt wird verwendet, um Benachrichtigungen von Server-Sent-Events zu empfangen:

Beispiel

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

Versuchen Sie es selbst

Beispiel Erklärung:

  • Erstellen Sie einen neuen EventSource-Objekt und geben Sie die URL der Seite an, die die Updates sendet (im Beispiel "demo_sse.php")
  • Bei jedem empfangenen Update wird der onmessage-Event ausgelöst
  • Wenn der onmessage-Event ausgelöst wird, wird das empfangene Daten in das Element mit der ID "result" eingefügt

Server-Sent-Event-Unterstützung überprüfen

In der TIY-Beispielanwendung haben wir zusätzliche Codezeilen hinzugefügt, um die Browser-Unterstützung für Server-Sent-Events zu überprüfen:

if(typeof(EventSource) !== "undefined") {
    // Ja! Server-Sent-Events werden unterstützt!
    // Einige Code.....
} else {
    // Entschuldigung! Server-Sent-Events werden nicht unterstützt!
}

Beispielcode auf dem Server

Um die Beispielanwendung auszuführen, müssen Sie in der Lage sein, Server-Updates zu senden (z.B. PHP oder ASP).

Die Syntax für Serverseitige Ereignisströme ist sehr 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()
%>

Codeerklärung:

  • Den Header "Content-Type" auf "text/event-stream" setzen
  • Keine Caching der Seite festlegen
  • Geben Sie das zu sendende Datum an (immer mit "data: " beginnen)
  • Daten für die Aktualisierung der Webseite ausgeben

EventSource-Objekt

Im obigen Beispiel 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