HTML Server-Sent events

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

Server-Sent events - Envejsbesked

Server-Sent events refererer til, at 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. Med 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-sent events.

API
SSE 6.0 Ikke understøttet 6.0 5.0 11.5

Modtag Server-Sent Event-notifikationer

EventSource-objektet bruges til at modtage server-sent event-notifikationer:

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 angiv URL'en til siden, der sender opdateringer (i dette eksempel er det "demo_sse.php")
  • Hver gang der modtages en opdatering, sker der et onmessage-event
  • Når onmessage-事件 sker, pushes modtaget data ind i elementet med id "result"

Tjek Server-Sent Event-støtte

I TIY-eksemplet har vi skrevet lidt ekstra kode for at teste støtte til server-sent events i browseren:

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

Server-side kodeeksempel

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

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

PHP code (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 (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 the date to be sent (always starts with "data: ")
  • Refresh the web page output data

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