HTML Server-Sent-tapahtumat

Server-Sent-tapahtumat mahdollistavat sivun saamisen päivityksiä palvelimelta.

Server-Sent-tapahtumat - Yksisuuntainen viestintä

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

Tämä voitiin tehdä aikaisemmin, mutta sivun oli kysyttävä, onko päivityksiä saatavilla. Server-Sent-tapahtumien avulla päivitykset voivat tulla automaattisesti.

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

Selaimen tuki

Taulukossa olevat numerot viittaavat ensimmäiseen selaimeseen, joka tukee täysin server-sent-tapahtumia.

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:

  • Luodaan uusi EventSource-objekti ja määritetään päivittävän sivun URL (tässä tapauksessa "demo_sse.php")
  • Kun vastaanotetaan päivittymistä, tapahtuu onmessage-tapahtuma
  • Kun onmessage-tapahtuma tapahtuu, siirretään vastaanotetut tiedot id:nä "result" olevaan elementtiin

Tarkista Server-Sent-tapahtumien tuki

TIY-esimerkissä kirjoitimme ylimääräistä koodia palvelimen lähettämien tapahtumien selaimen tuen tarkistamiseksi:

if(typeof(EventSource) !== "undefined") {
    // Kyllä! Palvelimen lähettämät tapahtumat ovat tuettuja!
    // Jotain koodia.....
} else {
    // anteeksi! Palvelimen lähettämät tapahtumat eivät ole tuettuja!
}

Palvelinpuolen koodiesimerkki

Jotta esimerkki toimisi, sinun on kyettävä lähettämään tietoja päivittävälle palvelimelle (esimerkiksi PHP tai ASP).

Palvelinpuoleisen tapahtumavirran syntaksi on erittäin yksinkertainen. Aseta otsikkopäähän "Content-Type" arvoksi "text/event-stream". Voit nyt aloittaa tapahtumavirran lähettämisen.

PHP-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-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 otsikkopäähän "Content-Type" arvoksi "text/event-stream"
  • Estä sivun välimuistinnäkö
  • Määritä lähetettävän tiedon päivämäärä (aineistoa aina alkaen "data: ")
  • 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