HTML Server-Sent events

Server-Sent events stellen de webpagina in staat om updates van de server te ontvangen.

Server-Sent events - Einzrichtige Messaging

Server-Sent events verwijzen naar het automatisch verkrijgen van updates door de webpagina van de server.

Dit kon eerder ook, op voorwaarde dat de webpagina moest vragen of er updates beschikbaar waren. Met Server-Sent events kunnen updates automatisch aankomen.

Bijvoorbeeld: Facebook/Twitter updates, aandeelkoers updates, nieuwe artikelen, wedstrijdresultaten, enz.

Browserondersteuning

De cijfers in de tabel wijzen op de eerste browsers die server-sent events volledig ondersteunen.

API
SSE 6.0 Niet ondersteund 6.0 5.0 11.5

Ontvang server-side event meldingen

Het EventSource-object wordt gebruikt om server-side events te ontvangen:

Voorbeeld

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

Probeer het zelf uit

Voorbeeld uitleg:

  • Maak een nieuwe EventSource-object aan en specificeer de URL van de pagina die de updates verzendt (in dit voorbeeld is dat "demo_sse.php")
  • Elke keer dat er een update ontvangen wordt, treedt het onmessage-evenement op
  • Wanneer het onmessage-evenement optreedt, wordt de ontvangen data ingevoegd in het element met id "result"

Detecteer Server-Sent Event ondersteuning

In de TIY voorbeeld hebben we extra code geschreven om de browserondersteuning voor server-side events te detecteren:

if(typeof(EventSource) !== "undefined") {
    // Ja! Server-side events worden ondersteund!
    // Enkele code.....
} else {
    // Excuses, server-side events worden niet ondersteund!
}

Server-side code voorbeeld

Om de voorbeeld te laten draaien, moet je in staat zijn om data-updates naar de server te sturen (bijvoorbeeld PHP of ASP).

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

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

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

?>

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

%>

  • Kode uitleg:
  • Stel de header "Content-Type" in op "text/event-stream"
  • Geef de te verzenden datum weer (altijd begint met "data: ")
  • Geef gegevens weer op het verversen van de pagina

EventSource Object

In het voorbeeld hiernaast gebruiken we de onmessage-gebeurtenis om berichten te ontvangen. Er kunnen ook andere gebeurtenissen worden gebruikt:

Gebeurtenis Beschrijving
onopen Bij het openen van de verbinding met de server
onmessage Bij het ontvangen van een bericht
onerror Bij fout