HTML Server-Sent-Events

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

Server-Sent-Events - Einbahnfern-Nachrichtensystem

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

Dies könnte auch zuvor erreicht werden, vorausgesetzt, die Webseite musste nach verfügbaren Updates fragen. Mit Server-Sent-Events erreichen die Updates automatisch das Ziel.

Beispielsweise: Facebook/Twitter-Updates, Aktienkurse-Updates, neue Blog-Posts, Wettkampfergebnisse 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

Empfangen Sie Benachrichtigungen von Server-Sent-Events

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>";
};

Probieren Sie es selbst aus

Beispiel-Erklärung:

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

Überprüfen Sie die Unterstützung für Server-Sent-Events

In der TIY-Instanz haben wir zusätzlichen Code geschrieben, 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 den obigen Beispiel auszuführen, müssen Sie in der Lage sein, einen Server zur Übermittlung von Datenaktualisierungen 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:

  • Setzen Sie den Header "Content-Type" auf "text/event-stream"
  • Verhindern Sie das Caching der Seite
  • 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 den 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 Bei Empfang einer Nachricht
onerror Bei Auftreten eines Fehlers