HTML handleiding

HTML TUIS HTML Inleiding HTML-redakteurs HTML Basies HTML elemente HTML-kenmerke HTML-opskrifte HTML paragrawe HTML-style HTML-formatering HTML-aanhalings HTML-kommentaar HTML kleure HTML CSS HTML skakels HTML beelde HTML Favicon HTML-tabelle HTML-lyste HTML-blok en inlyn HTML-klasse HTML ID HTML iframes HTML JavaScript HTML-lêerpaaie HTML kop HTML-uitleg HTML reageer HTML Rekenaarkode HTML semantiek HTML-stylgids HTML-entiteite HTML Simbole HTML Emoji's HTML-tekenset HTML URL enkodeer HTML vs. XHTML

HTML -vorms

HTML-vorms HTML-vorm eienskappe HTML-vormelemente HTML-invoertipes HTML-invoerkenmerke HTML-invoervorm-kenmerke

HTML -grafika

HTML-doek HTML SVG

HTML Media

HTML Media HTML-video HTML oudio HTML-inproppe HTML YouTube

HTML API's

HTML geoligging HTML Sleep/Drop HTML-webberging HTML Web Werkers HTML SSE

HTML voorbeelde

HTML voorbeelde HTML vasvra HTML-oefeninge HTML-sertifikaat HTML Opsomming HTML-toeganklikheid

HTML- verwysings

HTML-merkerlys HTML-kenmerke HTML globale kenmerke HTML-blaaierondersteuning HTML-gebeurtenisse HTML kleure HTML-doek HTML oudio/video HTML Doktipes HTML-karakterstelle HTML URL enkodeer HTML-langkodes HTTP-boodskappe HTTP metodes PX na EM-omskakelaar Sleutelbord kortpaaie

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