Eventi Server-Sent HTML

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

Eventi Server-Sent - Messaging a Singolo Way

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

Questo potrebbe essere fatto anche in precedenza, a condizione che il sito web dovesse chiedere se ci fossero aggiornamenti disponibili. Grazie agli eventi Server-Sent, gli aggiornamenti possono arrivare automaticamente.

Ad esempio: aggiornamenti Facebook/Twitter, aggiornamenti delle quotazioni azionarie, nuovi post, risultati delle gare, ecc.

Supporto del 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

Ricevere notifiche degli eventi Server-Sent

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

Esempio

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

Prova a fare tu stesso

Esempio di spiegazione:

  • Creare un nuovo oggetto EventSource, poi 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"

Rilevare la supporta degli eventi Server-Sent

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

if(typeof(EventSource) !== "undefined") {
    // Sì! Supporta l'invio di eventi dal server!
    // Alcuni codici.....
} else {
    // Mi dispiace! Non è supportato l'invio di eventi dal server!
}

Esempio di codice sul lato server

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

La sintassi degli stream di eventi server-side è molto semplice. Impostare l'intestazione "Content-Type" su "text/event-stream". Ora, è possibile iniziare a inviare lo stream 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
  • Specificare la data da inviare (sempre inizia con "data: ")
  • Aggiornare l'output della pagina web

Oggetto EventSource

Nel esempio precedente, utilizziamo l'evento onmessage per ottenere messaggi. Tuttavia, si possono utilizzare anche altri eventi:

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