English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Gli eventi inviati dal server (server-sent event) di HTML5 permettono alla pagina web di ottenere i dati più recenti dal server senza dover aggiornare la pagina, permettendo di ottenere dati dinamici in tempo reale.
Gli eventi inviati dal server (Server-Sent Events) sono eventi che permettono alla pagina web di ottenere aggiornamenti automatici dei dati dal server.
Metodi tradizionali per ottenere i dati più recenti dal server: tramite aggiornamento o tramite timer. Ora, tramite eventi inviati dal server (Server-Sent Events), è possibile ottenere automaticamente i dati più recenti.
Esempio: aggiornamenti Facebook/Twitter, dati di mercato, microblog, risultati delle gare sportive, messaggi dinamici, commenti, ecc.
Tutti i browser principali supportano gli eventi inviati dal server, eccetto Internet Explorer.
L'oggetto EventSource viene utilizzato per ricevere notifiche di eventi inviati dal server:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manuale di base del sito web (oldtoolbag.com)</title>
</head>
<body>
<h1> Ottieni i dati più recenti del server</h1>
<div id="result"></div>
<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("demo-sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
}
else
{
document.getElementById("result").innerHTML="Dispiace, il tuo browser non supporta gli eventi server-sent...";
}
</script>
</body>
</html>Prova a vedere ‹/›Esempio di analisi:
Crea un nuovo oggetto EventSource, quindi specifica l'URL della pagina che invia gli aggiornamenti (nel presente esempio è "demo_sse.php")
Si verifica l'evento onmessage ogni volta che si riceve un aggiornamento
Quando si verifica l'evento onmessage, inserisci i dati ricevuti nell'elemento con id "result"
Nei seguenti esempi, abbiamo scritto un codice aggiuntivo per verificare la supportazione del browser per gli eventi in streaming del server:
if(typeof(EventSource)!=="undefined")
{
// Il browser supporta Server-Sent
// Alcuni codici.....
}
else
{
// Il browser non supporta Server-Sent..
}Per far funzionare l'esempio sopra, hai bisogno anche di un server in grado di inviare aggiornamenti di dati (ad esempio PHP e ASP).
La sintassi degli eventi in streaming del server è molto semplice. Imposta l'intestazione 'Content-Type' a 'text/event-stream'. Ora, puoi iniziare a inviare lo streaming degli eventi.
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server current time: {$time}\n\n";
flush();
?>Codice ASP (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: The server current time" & now())
Response.Flush()
%>Spiegazione del codice:
Imposta l'intestazione "Content-Type" a "text/event-stream"
Non memorizzare la pagina nella cache
Output della data di invio (sempre inizia con "data: ")
Output di dati di aggiornamento della pagina web
Nell'esempio sopra, utilizziamo l'evento onmessage per ottenere messaggi. Tuttavia, è possibile utilizzare altri eventi:
| Evento | Descrizione |
| onopen | Quando si apre la connessione al server |
| onmessage | Quando si riceve un messaggio |
| onerror | Quando si verifica un errore |