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 till.

Till exempel: Facebook/Twitter-uppdateringar, aktiekursuppdateringar, nya inlägg, tävlingsresultat, osv.

Webbläsarstöd

Tal i tabellen indikerar den första webbläsaren som fullständigt stöder server-sända händelser.

API
SSE 6.0 Ej stöd 6.0 5.0 11.5

Ta emot Server-Sent-händelsenotiser

EventSource-objektet används för att ta emot server-sända händelsernotiser:

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ändelsestö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 {
    // Ursäkta! Stöd för server-sända händelser är inte tillgängligt!
}

Serverkodsexempel

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

Syntaxen för server-sida eventström är mycket enkel. Sätt rubriken "Content-Type" till "text/event-stream". Nu kan du börja skicka eventström.

Kod i PHP (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"
  • Ställ in att sidan inte ska cachas
  • Specificera det datum som ska skickas (börja alltid med "data: ")
  • Uppdatera webbsidan med data

EventSource-objekt

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

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