HTML SSE API
Server-Sent Events (SSE) umožňují webové stránce získat aktualizace ze serveru.
Události odeslané serverem – jednosměrné zasílání zpráv
Událost odeslaná serverem je, když webová stránka automaticky získá aktualizace ze serveru.
To bylo také možné dříve, ale webová stránka by se musela zeptat, zda jsou k dispozici nějaké aktualizace. S událostmi odeslanými serverem se aktualizace dodávají automaticky.
Příklady: aktualizace Facebooku/Twitteru, aktualizace cen akcií, zpravodajské kanály, sportovní výsledky atd.
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje události odeslané serverem.
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
Přijímat oznámení o událostech odeslaných serverem
Objekt EventSource se používá k přijímání oznámení o událostech odeslaných serverem:
Příklad
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
Vysvětlený příklad:
- Vytvořte nový objekt EventSource a zadejte adresu URL stránky odesílající aktualizace (v tomto příkladu "demo_sse.php")
- Pokaždé, když je přijata aktualizace, dojde k události onmessage
- Když dojde k události onmessage, vložte přijatá data do prvku s id="result"
Zkontrolujte podporu událostí odeslaných serverem
Ve výše uvedeném příkladu tryit bylo několik řádků kódu navíc pro kontrolu podpory prohlížeče pro události odeslané serverem:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
}
else {
// Sorry! No server-sent events support..
}
Příklad kódu na straně serveru
Aby výše uvedený příklad fungoval, potřebujete server schopný odesílat aktualizace dat (jako PHP nebo ASP).
Syntaxe streamu událostí na straně serveru je jednoduchá. Nastavte záhlaví "Content-Type" na "text/event-stream". Nyní můžete začít odesílat streamy událostí.
Kód v 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();
?>
Kód v ASP (VB) (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>
Vysvětlení kódu:
- Nastavte záhlaví „Content-Type“ na „text/event-stream“
- Určete, že se stránka nemá ukládat do mezipaměti
- Výstup dat k odeslání ( Vždy začínat „data:“)
- Vyprázdněte výstupní data zpět na webovou stránku
Objekt EventSource
Ve výše uvedených příkladech jsme k získání zpráv použili událost onmessage. K dispozici jsou ale i další akce:
| Events | Description |
|---|---|
| onopen | When a connection to the server is opened |
| onmessage | When a message is received |
| onerror | When an error occurs |