tutoriais mais recente desenvolvimento web

HTML5 Eventos enviados pelo servidor


Eventos enviados pelo servidor permitir que uma página web para obter atualizações de um servidor.


Eventos enviados pelo servidor - One Way Messaging

Um evento enviou-servidor é quando uma página web recebe automaticamente as atualizações de um servidor.

Isso também era possível antes, mas a página web teria que perguntar se há atualizações disponíveis. Com eventos enviados pelo servidor, as atualizações vêm automaticamente.

Exemplos: Facebook/Twitter atualizações, atualizações de preços de ações, feeds de notícias, resultados desportivos, etc.


Suporte navegador

Os números na tabela especificar a primeira versão do browser que suporta totalmente eventos enviados pelo servidor.

API
SSE 6 Não suportado 6 5 11,5

Receber notificações de eventos enviados pelo servidor

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

Exemplo

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

Exemplo explicado:

  • Criar um novo EventSource objeto e especificar o URL da página de envio das atualizações (in this example "demo_sse.php")
  • Cada vez que uma atualização é recebida, o onmessage evento ocorre
  • Quando um onmessage evento ocorre, colocar os dados recebidos no elemento com id="result"

Check Prova Eventos enviados pelo servidor

No tryit exemplo acima houve algumas linhas extras de código para verificar o suporte ao navegador para eventos enviados pelo servidor:

if(typeof(EventSource) !== "undefined") {
    // Yes! Server-sent events support!
    // Some code.....
} else {
    // Sorry! No server-sent events support..
}

Do lado do servidor Exemplo de código

Para o exemplo acima para trabalhar, você precisa de um servidor capaz de enviar atualizações de dados (como PHP ou ASP).

A do lado do servidor sintaxe fluxo de eventos é simples. Defina o "Content-Type" cabeçalho para "text/event-stream" . Agora você pode começar a enviar fluxos de eventos.

Código 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();
?>

Código em ASP (VB) (demo_sse.asp) :

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

Código explicou:

  • Defina o "Content-Type" cabeçalho para "text/event-stream"
  • Especificar que a página não deve armazenar em cache
  • Saída os dados para enviar ( Always start with "data: ")
  • Lave os dados de saída de volta para a página de web

O objeto EventSource

Nos exemplos acima, aproveitou o evento onMessage para obter mensagens. Mas outros eventos também estão disponíveis:

Eventos Descrição
onopen Quando uma conexão com o servidor é aberto
onmessage Quando uma mensagem é recebida
onerror Quando ocorre um erro