HTML Server-Sent-tapahtumat

Server-Sent-tapahtumat sallivat verkkosivun saada päivityksiä palvelimelta.

Server-Sent-tapahtumat - Yksisuuntainen viestintä

Server-Sent-tapahtumat tarkoittavat, että verkkosivu saa päivityksiä automaattisesti palvelimelta.

Tämä voisi olla mahdollista aiemmin, mutta verkkosivun oli kysyttävä, onko päivityksiä saatavilla. Server-Sent-tapahtumien avulla päivitykset voivat saapua automaattisesti.

Esimerkiksi: Facebook/Twitter-päivitykset, osakkeiden hinnat, uudet blogipostaukset, kilpailutulokset jne.

Selaimen tuki

Taulukossa olevat numerot viittaavat ensimmäisiin selaimiin, jotka tukevat server-sent-tapahtumia täysin.

API
SSE 6.0 Ei tuettu 6.0 5.0 11.5

Vastaanota Server-Sent tapahtumien ilmoitukset

EventSource-objekti käytetään palvelimen lähettämien tapahtumien vastaanottamiseen:

Esimerkki

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

Kokeile itse

Esimerkki selitetään:

  • Luo uusi EventSource-objekti ja määritä päivitettävän sivun URL (tässä tapauksessa "demo_sse.php")
  • Kun saadaan uusi päivitys, tapahtuu onmessage-tapahtuma
  • Kun onmessage-tapahtuma tapahtuu, lisätään vastaanotettu tieto elementtiin, jonka id on "result"

Tarkista Server-Sent tapahtumien tuki

TIY-esimerkissä kirjoitimme lisää koodia palvelimen lähettämien tapahtumien selaimen tuen tarkistamiseksi:

if(typeof(EventSource) !== "undefined") {
    // Kyllä! Tukee palvelimen lähettämiä tapahtumia!
    // Jotain koodia.....
} else {
    // anteeksi! Ei tueta palvelimen lähettämiä tapahtumia!
}

Palvelinpuolen koodiesimerkki

Jotta esimerkki toimisi, sinun on kyettävä lähettämään tietoupdoksia palvelimelle (esim. PHP tai ASP).

Palvelimellinen tapahtumavirta on erittäin yksinkertainen. Aseta otsikkoon "Content-Type" arvo "text/event-stream". Nyt voit aloittaa tapahtumavirran lähettämisen.

PHP:ssa oleva koodi (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();
?>

ASP:ssa oleva koodi (VB) (demo_sse.asp)：

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Koodin selitys:

  • Aseta otsikkoon "Content-Type" arvo "text/event-stream"
  • Määritä sivun ei tallenneta välimuistiin
  • Määritä lähetettävän tiedon päivämäärä (alkaen aina "data: "-merkillä)
  • Tuo tietoja sivun uudelleenlataamiseen

EventSource-objekti

Yllä olevassa esimerkissä käytämme onmessage-tapahtumaa viestin saamiseksi. Voimme kuitenkin käyttää myös muita tapahtumia:

Tapahtuma Kuvaus
onopen Kun yhteys palvelimeen avataan
onmessage Viestin vastaanotettaessa
onerror Virheen tapahtuessa