Latest web development tutorials

HTML5 Eventi Server-Sent (Eventi Server-Sent)

server di HTML5 inviare gli eventi (eventi server inviato) consente alle pagine web per ottenere gli aggiornamenti dal server.

Eventi Server-Sent - messaggistica modo

evento Server-Sent è il sito web ottenere automaticamente gli aggiornamenti dal server.

In precedenza può anche farlo, a condizione che la pagina ha dovuto chiedere se è disponibile un aggiornamento. Il server invia l'evento, l'aggiornamento arriverà automaticamente.

Esempi: aggiornamenti di Facebook / Twitter, aggiornamenti di valutazione, nuovo blog, risultati dei tornei e così via.

Supporto per il browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Tutti i browser principali sono supportati dal server invia l'evento, oltre a Internet Explorer.

Ricevere notifica degli eventi Server-Sent

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

Esempi

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

Prova »

Esempi di analisi:

  • EventSource creare un nuovo oggetto, e quindi inviare l'URL regolamenti aggiornamento della pagina (in questo caso, "demo_sse.php")
  • Ciascuno riceve un aggiornamento, si verifica un evento onMessage
  • Quando si verifica un evento onMessage, i dati ricevuti viene spinto nella elemento id "risultato" in

Rilevazione Eventi Server-Sent Support

Gli esempi che seguono, abbiamo scrivere del codice aggiuntivo per rilevare il browser al server di inviare gli eventi sostenuta da:

if (typeof (EventSource)! == "undefined")
{
// Browser supporta Server-Sent
//Alcuni codice .....
}
altro
{
// Browser non supporta Server-Sent ..
}

Esempi di codice lato server

Per rendere l'esempio di cui sopra, è possibile eseguire, è inoltre necessario essere in grado di inviare i dati per aggiornare il server (come PHP e ASP).

flusso di eventi sul lato server sintassi è molto semplice. L'intestazione "Content-Type" è impostato su "text / evento-stream". A questo punto è possibile iniziare a inviare il flusso di eventi.

Esempi

<? Php
intestazione ( 'Content-Type: text / evento-stream');
intestazione ( 'Cache-Control: no -cache');

$ Time = data ( 'r' );
echo "i dati: l'ora del server è : {$ time} \ n \ n";
flush ();
?>

codice ASP (VB) (demo_sse.asp):

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

Codice spiegazione:

  • L'intestazione "Content-Type" è impostato su "text / evento-stream"
  • Disposizione non pagine nella cache
  • Data di trasmissione in uscita (sempre "i dati:" all'inizio)
  • Aggiornare la pagina di dati in uscita

oggetti EventSource

Nell'esempio precedente, abbiamo usato per ottenere l'evento messaggio onMessage. Tuttavia, è possibile utilizzare anche altri eventi:

事件 描述
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
onerror 当发生错误