HTML Server-Sent events

Server-Sent events laten de webpagina updates ontvangen van de server toe.

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 pagina moest vragen of er updates beschikbaar waren. Met Server-Sent events kunnen updates automatisch aankomen.

Bijvoorbeeld: Facebook/Twitter updates, koersupdates, nieuwe berichten, 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-Sent event meldingen

Het EventSource-object wordt gebruikt om servergebeurtenissen 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 (bijvoorbeeld "demo_sse.php")
  • Elke keer dat er een update wordt ontvangen, treedt het onmessage-evenement op
  • Zodra het onmessage-evenement optreedt, wordt de ontvangen data in het element met id "result" ingevoegd

Detecteer Server-Sent event ondersteuning

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

if(typeof(EventSource) !== "undefined") {
    // Ja! Servergebeurtenissen worden ondersteund!
    // Enkele code.....
} else {
    // Excuses, servergebeurtenissen worden niet ondersteund!
}

Serverkant code voorbeeld

Om de voorbeeld te laten draaien, moet je in staat zijn om serverupdates te verzenden (bijvoorbeeld PHP of ASP).

De syntaxis van server-side event streams is zeer eenvoudig. Stel de header "Content-Type" in op "text/event-stream". Nu kunt u beginnen met het verzenden van event streams.

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

Code uitleg:

  • Header "Content-Type" instellen op "text/event-stream"
  • Stel de header "Content-Type" in op "text/event-stream"
  • Geef de te verzenden datum weer (altijd begint met "data: ")
  • Geef data weer op de pagina vernieuwen

EventSource Object

In het voorbeeld hiernaast gebruiken we de onmessage-gebeurtenis om berichten te ontvangen. Er kunnen echter 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 foutmeldingen