Latest web development tutorials

HTML5 Eventos enviados pelo servidor (Eventos enviados pelo servidor)

servidor HTML5 enviar eventos (eventos enviados pelo servidor) permite que as páginas da web para obter atualizações do servidor.

Eventos enviados pelo servidor de mensagens - forma

eventos enviados pelo servidor é o site obter automaticamente actualizações a partir do servidor.

Anteriormente, também pode fazê-lo, desde que a página tinha de perguntar se uma atualização está disponível. O servidor envia o evento, a atualização chegará automaticamente.

Exemplos: atualizações de Facebook / Twitter, atualizações de avaliação, novo blog, resultados de torneios e assim por diante.

Suporte a navegadores

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Todos os principais navegadores são suportados pelo servidor envia o evento, além de Internet Explorer.

Recebendo notificação de eventos enviados pelo servidor

EventSource objeto é usado para receber notificações de eventos enviados pelo servidor:

Exemplos

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

tente »

exemplos de análise:

  • EventSource criar um novo objeto, e depois enviar a regulamentação de atualização de URL da página (neste caso, "demo_sse.php")
  • Cada um recebe uma atualização, evento onmessage ocorre
  • Quando o evento onmessage ocorre, os dados recebidos são empurrados para o id elemento "resultado" em

Suporte enviados pelo servidor de eventos Detecção

Os exemplos a seguir, nós escrever algum código adicional para detectar o navegador para o servidor para enviar eventos apoiados por:

if (typeof (EventSource)! == "undefined")
{
// Navegador suporta Servidor-Sent
//Alguns códigos .....
}
mais
{
// Navegador não suporta enviadas pelo servidor ..
}

Exemplos de código do lado do servidor

Para tornar o exemplo acima, você pode correr, você também precisa ser capaz de enviar dados para atualizar o servidor (como PHP e ASP).

Sintaxe fluxo de eventos do lado do servidor é muito simples. O "Content-Type" cabeçalho é definido como "text / evento-stream". Agora você pode começar a enviar o fluxo de eventos.

Exemplos

<? Php
header ( 'Content-Type: text / event-stream');
header ( "Cache-Control: no -cache ');

$ Time = Data ( 'r' );
echo "de dados: O tempo servidor é : {$ time} \ n \ n";
flush ();
?>

código ASP (VB) (demo_sse.asp):

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

explicação código:

  • O cabeçalho "Content-Type" está ajustado para "text / evento-stream"
  • Disposição não páginas de cache
  • data da transmissão de saída (sempre "Dados:" no início)
  • Atualize a página para dados de saída

objetos EventSource

No exemplo acima, nós utilizamos para obter o evento de mensagem onmessage. No entanto, você também pode usar outros eventos:

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