HTML SSE API
Server-Sent Events (SSE) laat 'n webblad toe om opdaterings van 'n bediener af te kry.
Bediener-gestuurde gebeurtenisse - eenrigtingboodskappe
'n Bediener gestuurde gebeurtenis is wanneer 'n webblad outomaties opdaterings van 'n bediener af kry.
Dit was ook voorheen moontlik, maar die webblad sal moet vra of enige opdaterings beskikbaar is. Met gebeure wat deur die bediener gestuur is, kom die opdaterings outomaties.
Voorbeelde: Facebook/Twitter-opdaterings, aandeelprysopdaterings, nuusfeeds, sportuitslae, ens.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat bedienergestuurde gebeurtenisse ten volle ondersteun.
API | |||||
---|---|---|---|---|---|
SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
Ontvang bediener-gestuurde gebeurteniskennisgewings
Die EventSource-objek word gebruik om bedienergestuurde gebeurteniskennisgewings te ontvang:
Voorbeeld
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
Voorbeeld verduidelik:
- Skep 'n nuwe EventSource-objek en spesifiseer die URL van die bladsy wat die opdaterings stuur (in hierdie voorbeeld "demo_sse.php")
- Elke keer as 'n opdatering ontvang word, vind die onboodskap-gebeurtenis plaas
- Wanneer 'n onboodskap-gebeurtenis plaasvind, plaas die ontvangde data in die element met id="result"
Gaan Ondersteuning vir bedienergestuurde gebeurtenisse na
In die tryit-voorbeeld hierbo was daar 'n paar ekstra reëls kode om blaaierondersteuning vir bedienergestuurde gebeurtenisse na te gaan:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
}
else {
// Sorry! No server-sent events support..
}
Bediener-kant kode voorbeeld
Vir die voorbeeld hierbo om te werk, benodig jy 'n bediener wat data-opdaterings (soos PHP of ASP) kan stuur.
Die sintaksis van die gebeurtenisstroom aan die bedienerkant is eenvoudig. Stel die "Content-Type" kopskrif op "text/event-stream". Nou kan jy gebeurtenisstrome begin stuur.
Kode 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();
?>
Kode 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 verduidelik:
- Stel die "Content-Type" kopskrif op "text/event-stream"
- Spesifiseer dat die bladsy nie moet kas nie
- Voer die data uit om te stuur ( Begin altyd met "data: ")
- Spoel die uitvoerdata terug na die webblad
Die EventSource-objek
In die voorbeelde hierbo het ons die onmessage-geleentheid gebruik om boodskappe te kry. Maar ander geleenthede is ook beskikbaar:
Events | Description |
---|---|
onopen | When a connection to the server is opened |
onmessage | When a message is received |
onerror | When an error occurs |