Einführung in EventSource, gesendet vom SSE-Server in HTML5

Dieser Artikel stellt hauptsächlich die Einführung von EventSource für vom Server gesendete Ereignisse in HTML5 vor. Interessierte können mehr darüber erfahren

Ich habe im vorherigen Artikel über den Big-Data-Bildschirm gesprochen und die darin enthaltenen Daten werden ständig aktualisiert. Es gibt auch Bestandsdaten, die von Zeit zu Zeit aktualisiert werden, Facebook-/Twitter-Updates, Bewertungsaktualisierungen, neue Blogbeiträge, Veranstaltungsergebnisse usw. – alles erfordert eine gelegentliche Aktualisierung der Daten. Früher haben wir normalerweise den Server angefragt, um zu sehen, ob Daten vorhanden sind, die aktualisiert werden könnten. HTML5 bietet die Methode „Server-Sent Events“, die Ereignisse über den Server sendet und Updates automatisch eintreffen können.

Vom Server gesendete Ereignisse verwenden

Vom Server gesendete Ereignisse sind sehr einfach zu verwenden. Es akzeptiert serverseitige Nachrichten über das EventSource-Objekt. Es gibt folgende Ereignisse:

onopen Wenn die Verbindung zum Server geöffnet wird

• onmessage Wenn eine Nachricht empfangen wird

• onerror Wenn ein Fehler auftritt
Unterstützung für vom Server gesendete Ereignisse erkennen

Vom Server gesendete Ereignisbenachrichtigung empfangen

if(typeof(EventSource)!=="undefined")
{
  // 浏览器支持 Server-Sent
  // 一些代码.....
}
else
{
// 浏览器不支持 Server-Sent..
}

Serverseitiges Codebeispiel

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

Fügen Sie

<?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 time is: {$time}\n\n"; 
flush(); 
?>

sowohl zu Linkereignissen als auch zu Fehlerereignissen hinzu. Wir werden das finden Die Konsole gibt Folgendes aus:

if(typeof(EventSource)!=="undefined")
{
    var source=new EventSource("server.php");
    source.onopen=function()
    {
         console.log("Connection to server opened.");
    };
    source.onmessage=function(event)
    {

        document.getElementById("result").innerHTML+=event.data + "<br>";
    };
    source.onerror=function()
    {
        console.log("EventSource failed.");
    };
}
else
{
    document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
}

Weitere Links und Fehler eingeben. Für Details klicken Sie bitte auf

Das liegt daran, dass der PHP-Code nur ein einfaches Echo ist und dies auch tut nicht kontinuierlich ausgegeben. Nehmen Sie die folgenden Verbesserungen am PHP-Code vor:

und es werden keine Fehler mehr auftreten!

<?php 
header(&#39;Content-Type: text/event-stream&#39;); 
header(&#39;Cache-Control: no-cache&#39;); 

$time = date(&#39;r&#39;); 

  $i = 0;
  $c = $i + 100;
  while (++$i < $c) {
    echo "id: " . $i . "\n";
    echo "data: " . $time. ";\n\n";
    ob_flush();
    flush();
    sleep(1);
  }
?>

IE-Browser-kompatible Lösung

Wir wissen, dass der IE-Browser EventSource nicht unterstützt. Es gibt die folgenden Lösungen:

Einführung

ist die perfekte Lösung. Sie können die Github-Adresse überprüfen: https://github.com/Yaffle/EventSource. Es ist auch sehr praktisch, es mit nodejs zu verwenden.

Das obige ist der detaillierte Inhalt vonEinführung in EventSource, gesendet vom SSE-Server in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!