HTML Server-Sent-händelser

Server-Sent-händelser tillåter webbsidan att få uppdateringar från servern.

Server-Sent-händelser - Envägsmeddelanden

Server-Sent-händelser innebär att webbsidan automatiskt får uppdateringar från servern.

Det var också möjligt att göra detta tidigare, förutsatt att webbsidan måste fråga om det finns tillgängliga uppdateringar. Genom Server-Sent-händelser kan uppdateringar automatiskt komma fram.

Till exempel: Facebook/Twitter-uppdateringar, aktiekursuppdateringar, nya inlägg, tävlingsresultat, och så vidare.

Webbläsarstöd

Numrerna i tabellen indikerar de första webbläsarna som helt stöder server-sända händelser.

API
SSE 6.0 Inte stödd 6.0 5.0 11.5

Ta emot Server-Sent-händelser

EventSource-objektet används för att ta emot meddelanden från servern som skickas via händelser:

Exempel

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

Prova själv

Exempel förklaring:

  • Skapa en ny EventSource-objekt och specificera URL:en för sidan som skickar uppdateringar (i detta exempel är det "demo_sse.php")
  • Varje gång en uppdatering mottas inträffar onmessage-händelsen
  • När onmessage-händelsen inträffar, lägg till mottagen data i elementet med id "result"

Testa Server-Sent-händelser-stöd

I TIY-exempeln skrev vi extra kod för att testa stöd för webbläsare för server-sända händelser:

if(typeof(EventSource) !== "undefined") {
    // Ja! Stöd för server-sända händelser!
    // Några kod...
} else {
    // Förlåt! Stöd för server-sända händelser stöds inte!
}

Server-side kodexempel

För att köra föregående exempel behöver du en server som kan skicka datauppdateringar (t.ex. PHP eller ASP).

服务器端事件流的语法非常简单。请把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。

服务器端事件流的语法非常简单。请把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。

PHP-kod (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();

?>

Kod i ASP (VB) (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()

%>

  • Kodförklaring:
  • Sätt rubriken "Content-Type" till "text/event-stream"
  • Specificera att sidan inte ska cachas
  • Skicka data till webbsidans uppdatering

EventSource-objekt

I föregående exempel använder vi onmessage-händelsen för att få tag på meddelanden. Men det går också att använda andra händelser:

Händelse Beskrivning
onopen När anslutningen till servern öppnas
onmessage När ett meddelande mottas
onerror När ett fel inträffar