HTML5 - Eventi inviati dal server
Le applicazioni web convenzionali generano eventi che vengono inviati al server web. Ad esempio, un semplice clic su un collegamento richiede una nuova pagina dal server.
Il tipo di eventi che fluiscono dal browser web al server web può essere chiamato eventi inviati dal client.
Insieme a HTML5, WHATWG Web Applications 1.0 introduce eventi che fluiscono dal server web ai browser web e sono chiamati eventi inviati dal server (SSE). Utilizzando SSE puoi inviare continuamente eventi DOM dal tuo server web al browser del visitatore.
L'approccio dello streaming di eventi apre una connessione persistente al server, inviando dati al client quando sono disponibili nuove informazioni, eliminando la necessità di polling continuo.
Gli eventi inviati dal server standardizzano il modo in cui trasmettiamo i dati dal server al client.
Applicazione Web per SSE
Per utilizzare gli eventi inviati dal server in un'applicazione Web, è necessario aggiungere un elemento <eventsource> al documento.
Il src l'attributo dell'elemento <eventsource> dovrebbe puntare a un URL che dovrebbe fornire una connessione HTTP persistente che invia un flusso di dati contenente gli eventi.
L'URL punta a uno script PHP, PERL o qualsiasi script Python che si occuperà di inviare i dati degli eventi in modo coerente. Di seguito è riportato un semplice esempio di applicazione web che richiede tempo del server.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
/* Define event handling logic here */
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker">
<TIME>
</div>
</body>
</html>Script lato server per SSE
Dovrebbe inviare uno script lato server Content-typeintestazione che specifica il tipo text / event-stream come segue.
print "Content-Type: text/event-stream\n\n";Dopo aver impostato Content-Type, lo script lato server invierà un file Event: tag seguito dal nome dell'evento. L'esempio seguente invierà Server-Time come nome dell'evento terminato da un nuovo carattere di riga.
print "Event: server-time\n";Il passaggio finale consiste nell'inviare i dati dell'evento utilizzando Data: tag che sarebbe seguito da un numero intero di valore stringa terminato da un nuovo carattere di riga come segue -
$time = localtime();
print "Data: $time\n";Infine, il seguente è ticker.cgi completo scritto in Perl -
#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true) {
print "Event: server-time\n";
$time = localtime();
print "Data: $time\n";
sleep(5);
}Gestisci eventi inviati dal server
Modifichiamo la nostra applicazione web per gestire gli eventi inviati dal server. Di seguito è riportato l'ultimo esempio.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
document.getElementsByTagName("eventsource")[0].addEventListener("server-time",
eventHandler, false);
function eventHandler(event) {
// Alert time sent by the server
document.querySelector('#ticker').innerHTML = event.data;
}
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker" name = "ticker">
[TIME]
</div>
</body>
</html>Prima di testare gli eventi inviati dal server, ti suggerisco di assicurarti che il tuo browser web supporti questo concetto.