Eventi Server-Sent HTML

Gli eventi Server-Sent permettono alla pagina web di ottenere aggiornamenti dal server.

Eventi Server-Sent - Messaging a Direzione Unica

Gli eventi Server-Sent sono eventi che permettono alla pagina web di ottenere aggiornamenti automaticamente dal server.

In passato era possibile fare la stessa cosa, a condizione che il sito web dovesse chiedere se erano disponibili aggiornamenti. Grazie agli eventi Server-Sent, gli aggiornamenti possono arrivare automaticamente.

Ad esempio: aggiornamenti Facebook/Twitter, aggiornamenti delle quote di mercato, nuovi post, risultati delle gare, ecc.

Supporto dei browser

I numeri nella tabella indicano il primo browser che supporta completamente gli eventi server-sent.

API
SSE 6.0 Non supportato 6.0 5.0 11.5

Ricezione delle notifiche degli eventi Server-Sent

L'oggetto EventSource viene utilizzato per ricevere le notifiche degli eventi inviati dal server:

Esempio

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

Prova tu stesso

Esempio di spiegazione:

  • Creare un nuovo oggetto EventSource e specificare l'URL della pagina che invia gli aggiornamenti (nel presente esempio è "demo_sse.php")
  • Ogni volta che si riceve un aggiornamento, si verifica l'evento onmessage
  • Quando si verifica l'evento onmessage, inserire i dati ricevuti nell'elemento con id "result"

Rilevamento del supporto per gli eventi Server-Sent

Nel esempio TIY, abbiamo scritto un codice aggiuntivo per rilevare il supporto del browser per l'invio di eventi dal server:

if(typeof(EventSource) !== "undefined") {
    // Sì! Supportiamo l'invio di eventi dal server!
    // Alcuni codici.....
} else {
    // Scusate! Non supportiamo l'invio di eventi dal server!
}

Esempio di codice sul lato server

Per far funzionare l'esempio precedente, è necessario essere in grado di inviare aggiornamenti di dati al server (ad esempio PHP o ASP).

La sintassi della flusso di eventi sul lato server è molto semplice. Impostare l'intestazione "Content-Type" su "text/event-stream". Ora, è possibile iniziare a inviare il flusso di eventi.

Codice 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();
?>

Codice in ASP (VB) (demo_sse.asp):

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

Spiegazione del codice:

  • Impostare l'intestazione "Content-Type" su "text/event-stream"
  • Specificare che la pagina non deve essere cacheata
  • Output della data da inviare (si inizia sempre con "data: ")
  • Output di aggiornamento della pagina web

Oggetto EventSource

Nell'esempio sopra, abbiamo utilizzato l'evento onmessage per ottenere messaggi. Tuttavia, si possono utilizzare altri eventi:

Evento Descrizione
onopen Quando la connessione al server viene aperta
onmessage Quando si riceve un messaggio
onerror Quando si verifica un errore