English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Server-Send-Ereignisse

HTML5 Server-Send-Ereignisse (server-sent event) ermöglicht es der Webseite, die neuesten Daten vom Server zu erhalten, ohne die Seite neu zu laden, und die neuesten Daten dynamisch abzurufen.

Server-Gesendete Ereignisse - Einseitige Nachrichtenübermittlung

Server-Gesendete Ereignisse beziehen sich auf die automatische Übermittlung von Datenaktualisierungen vom Server zur Webseite.

Die traditionellen Methoden zur Erzielung der neuesten Daten von Servern sind das Aktualisieren oder das Auslösen eines Timers, um die neuesten Daten zu erhalten. Und jetzt können Sie über Server-Send-Ereignisse Server-Durch das Senden eines Ereignisses können Sie automatisch die neuesten Daten abrufen.

Beispiel: Facebook/Twitter-Updates, Börsenkurse, Weibo, Sportergebnisse, dynamische Nachrichten, Kommentare usw.

Browser-Unterstützung

Alle gängigen Browser unterstützen Server-Send-Ereignisse, mit Ausnahme von Internet Explorer.

Empfangen von Server-Gesendete Ereignisbenachrichtigung

Das EventSource-Objekt wird verwendet, um Benachrichtigungen von Servern zu empfangen:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial-Website(oldtoolbag.com)</title>
</head>
<body>
<h1>Erhalten Sie die neuesten Daten vom Server</h1>
<div id="result"></div>
<script>
if(typeof(EventSource)!=="undefined")
{
    var source=new EventSource("demo-sse.php");
    source.onmessage=function(event)
    {
        document.getElementById("result").innerHTML+=event.data + "<br>";
    };
}
else
{
    document.getElementById("result").innerHTML="Entschuldigung, Ihr Browser unterstützt server-sent Ereignis...";
}
</script>
</body>
</html>
Testen Sie es heraus ‹/›

Beispielanalyse:

  • Erstellen Sie ein neues EventSource-Objekt und legen Sie die URL der Seite fest, von der die Aktualisierungen gesendet werden (im Beispiel "demo_sse.php")

  • Bei jedem Empfangen einer Aktualisierung tritt das onmessage-Ereignis auf

  • Wenn der onmessage-Ereignisvorgang auftritt, wird das empfangene Daten in das Element mit der ID "result" eingefügt

Überprüfen Sie Server-Gesendet Ereignisunterstützung

In den folgenden Beispielen schreiben wir zusätzlichen Code, um die Unterstützung des Browsers für das Senden von Ereignissen durch den Server zu überprüfen:

if(typeof(EventSource)!=="undefined")
{
    // Der Browser unterstützt Server-Gesendet
    // Einige Code.....
}
else
{
    // Der Browser unterstützt Server-Gesendet..
}

Serverseitiger Codebeispiel

Um den obigen Beispielcode auszuführen, benötigen Sie auch die Möglichkeit, Datenaktualisierungen von einem Server zu senden (z.B. PHP und ASP).

Der Syntax des Serverseitigen Ereignisstroms ist sehr einfach. Setzen Sie "Content-Type" Header wird auf "text/event-stream". Jetzt können Sie mit dem Senden von Ereignisströmen beginnen.

在线示例

<?php
header(&39;Content-Type: text/event-stream&39;);
header(&39;Cache-Control: no-cache&39;);
$time = date(&39;r&39;);
echo "data: The server current time: {$time}\n\n";
flush();
?>

ASP 代码 (VB) (demo_sse.asp):

<%}
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: The server current time" & now())
Response.Flush()
%>

Codeerklärung:

  • Setzen Sie den Header "Content-"Type" auf "text" setzen/event-stream"

  • Seite nicht zwischenspeichern

  • Senden des Datums der Übertragung (immer mit "data: " beginnt)

  • Daten zur Aktualisierung der Webseite senden

EventSource-Objekt

In den obigen Beispielen verwenden wir das onmessage-Ereignis, um Nachrichten zu erhalten. Es können jedoch auch andere Ereignisse verwendet werden:

EreignisBeschreibung
onopenWenn die Verbindung zum Server geöffnet wird
onmessageWenn eine Nachricht empfangen wird
onerrorWenn ein Fehler auftritt