HTML SSE-API
Server-Sent Events (SSE) zorgen ervoor dat een webpagina updates van een server kan krijgen.
Door server verzonden gebeurtenissen - One Way Messaging
Een server-verzonden gebeurtenis is wanneer een webpagina automatisch updates ontvangt van een server.
Dit was voorheen ook mogelijk, maar de webpagina zou moeten vragen of er updates beschikbaar waren. Bij door de server verzonden gebeurtenissen komen de updates automatisch.
Voorbeelden: Facebook/Twitter-updates, aandelenkoersupdates, nieuwsfeeds, sportresultaten, etc.
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die door de server verzonden gebeurtenissen volledig ondersteunt.
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
Door de server verzonden gebeurtenismeldingen ontvangen
Het EventSource-object wordt gebruikt om door de server verzonden gebeurtenismeldingen te ontvangen:
Voorbeeld
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
Voorbeeld uitgelegd:
- Maak een nieuw EventSource-object en geef de URL op van de pagina die de updates verzendt (in dit voorbeeld "demo_sse.php")
- Elke keer dat een update wordt ontvangen, vindt de gebeurtenis onmessage plaats
- Wanneer een onmessage-gebeurtenis optreedt, plaatst u de ontvangen gegevens in het element met id="result"
Controleer Ondersteuning voor door de server verzonden gebeurtenissen
In het bovenstaande tryit-voorbeeld waren er enkele extra regels code om browserondersteuning voor door de server verzonden gebeurtenissen te controleren:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
}
else {
// Sorry! No server-sent events support..
}
Voorbeeld van server-side code
Om het bovenstaande voorbeeld te laten werken, hebt u een server nodig die gegevensupdates kan verzenden (zoals PHP of ASP).
De syntaxis van de gebeurtenisstroom aan de serverzijde is eenvoudig. Stel de kop "Content-Type" in op "text/event-stream". Nu kunt u gebeurtenisstreams gaan verzenden.
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 uitgelegd:
- Stel de kop "Content-Type" in op "text/event-stream"
- Geef op dat de pagina niet in de cache mag worden opgeslagen
- Voer de te verzenden gegevens uit ( begin altijd met "data: ")
- Spoel de uitvoergegevens terug naar de webpagina
Het Event Source-object
In de bovenstaande voorbeelden hebben we de gebeurtenis onmessage gebruikt om berichten op te halen. Maar er zijn ook andere evenementen:
| Events | Description |
|---|---|
| onopen | When a connection to the server is opened |
| onmessage | When a message is received |
| onerror | When an error occurs |