So verwenden Sie den H5-SSE-Server zum Senden von EventSource-Ereignissen

Dieses Mal zeige ich Ihnen, wie Sie den SSE-Server von h5 zum Senden von EventSourceEreignissen verwenden und welche Vorsichtsmaßnahmen für die Verwendung des SSE-Servers von h5 zum Senden von EventSource-Ereignissen gelten Ein praktischer Fall.

Vorwort

Ich habe im vorherigen Artikel über den Big-Data-Bildschirm gesprochen und die darin enthaltenen Daten werden von Zeit zu Zeit 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. Sie akzeptieren 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..
}

Benachrichtigung über vom Server gesendete Ereignisse empfangen

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

Serverseitige Codebeispiele

<?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();
?>

Link-Ereignisse und Fehlerereignisse wurden hinzugefügt

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese gelesen haben Fälle, spannender Bitte achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

So implementieren Sie die HTML-Tabellen-Maus-Drag-Sortierung

So lösen Sie verschiedene ie6-ie10-Kompatibilitätsprobleme Probleme

So formatieren Sie JSON-Daten in HTML

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den H5-SSE-Server zum Senden von EventSource-Ereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!