Ausführliche Erläuterung des SSE-Servers, der das Ereignis EventSource von H5 sendet

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der vom SSE-Server gesendeten EventSource in H5 geben. Das Folgende ist ein praktischer Fall Schauen Sie mal rein.

Vorwort

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. – alle müssen von Zeit zu Zeit aktualisiert werden. 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 Aktualisierungen automatisch eintreffen kann.

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

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

Server empfangen -Gesendete Ereignisbenachrichtigung

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

Serverseitiges Codebeispiel

<?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 Verbindungsereignisse als auch Fehlerereignisse werden hinzugefügt

Wir werden feststellen, dass die Konsole wie folgt druckt:

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 事件...";
}

Für Details klicken Sie bitte auf

Das liegt daran

Der PHP-Code

ist nur ein einfaches Echo und wird nicht kontinuierlich ausgegeben. Wir verbessern den obigen PHP-Code wie folgt

und es wird keine kontinuierlichen Fehler geben!

<?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-kompatibelLösungWir wissen, dass der IE-Browser EventSource nicht unterstützt. Es gibt die folgenden Lösungen:

Die Einführung von

kann eine perfekte Lösung sein. Sie können die Github-Adresse überprüfen:

eventsource.min.js

https://

github.com/Yaffle/EventSource. Es ist auch sehr praktisch, es mit nodejs zu verwenden.

Ich glaube, Sie haben es Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

npm install event-source-polyfill

Empfohlene Lektüre:

H5 implementiert eine skalierbare Uhranimation

So verwenden Sie Präfix-Datenattribute und Datensätze

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des SSE-Servers, der das Ereignis EventSource von H5 sendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!