HTML Server-Sent events

Server-Sent events tillader websiden at modtage opdateringer fra serveren.

Server-Sent events - Envejsbesked

Server-Sent events er, når websiden automatisk modtager opdateringer fra serveren.

Det var også muligt at gøre det før, men forudsatte, at websiden måtte spørge, om der var tilgængelige opdateringer. Gennem Server-Sent events kan opdateringer automatisk komme til.

For eksempel: Facebook/Twitter-opdateringer, aktiekursopdateringer, nye blogindlæg, sportsresultater, osv.

Browserstøtte

Tallene i tabellen indikerer den første browser, der fuldt ud understøtter server-sendte hændelser.

API
SSE 6.0 Ikke understøttet 6.0 5.0 11.5

Modtag Server-Sent hændelsesnotifikationer

EventSource-objektet bruges til at modtage server-sendte hændelsesnotifikationer:

Eksempel

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

Prøv det selv

Eksempel forklaring:

  • Opret et nyt EventSource-objekt og definer URL'en til siden, der sender opdateringer (i dette eksempel er det "demo_sse.php")
  • Når der modtages en opdatering, udløses onmessage-hændelsen
  • Hver gang der modtages en opdatering, udløses onmessage-hændelsen

Tilføj Server-Sent hændelsesstøtte

I TIY-eksemplet har vi skrevet ekstra kode til at teste støtte for server-sendte hændelser i browseren:

if(typeof(EventSource) !== "undefined") {
    // Ja! Understøtter server-sendte hændelser!
    // Nogle kode...
} else {
    // Undskyld! Understøtter ikke server-sendte hændelser!
}

Server-side kodeeksempel

For at få eksemplet til at køre, skal du kunne sende dataopdateringer til serveren (f.eks. PHP eller ASP).

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

Server-side event stream syntax is very simple. Set the header "Content-Type" to "text/event-stream". Now, you can start sending the event stream.

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

?>

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

%>

  • Code explanation:
  • Set the header "Content-Type" to "text/event-stream"
  • Specify that the page should not be cached
  • Output data to the web page refresh

EventSource object

In the example above, we use the onmessage event to get the message. However, other events can also be used:

Event Description
onopen When the connection to the server is opened
onmessage When a message is received
onerror When an error occurs