Eventos Server-Sent HTML

Eventos Server-Sent permitem que a página web receba atualizações do servidor.

Eventos Server-Sent - Mensagens de单向

Eventos Server-Sent são eventos que permitem que a página web receba atualizações automaticamente do servidor.

Também era possível fazer isso antes, desde que a página da web tivesse que perguntar se havia atualizações disponíveis. Com eventos Server-Sent, as atualizações podem chegar automaticamente.

Por exemplo: atualizações do Facebook/Twitter, atualizações de ações, novos posts, resultados de eventos, etc.

Suporte do navegador

Os números na tabela indicam o primeiro navegador que suporta completamente os eventos server-sent.

API
SSE 6.0 Não suportado 6.0 5.0 11.5

Receber notificações de eventos Server-Sent

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

Exemplo

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

Experimente você mesmo

Explicação do exemplo:

  • Crie um novo objeto EventSource e especifique a URL da página que envia as atualizações (no exemplo, "demo_sse.php")
  • Cada vez que há uma atualização recebida, ocorre o evento onmessage
  • Quando o evento onmessage ocorre, insira os dados recebidos no elemento com id "result"

Detecção de suporte a eventos Server-Sent

No exemplo do TIY, escrevemos um código adicional para detectar o suporte do navegador aos eventos de envio de servidor:

if(typeof(EventSource) !== "undefined") {
    // Sim! Suporte para eventos de envio de servidor!
    // Alguns códigos.....
} else {
    // Desculpe! Não há suporte para eventos de envio de servidor!
}

Exemplo de código no servidor

Para que o exemplo anterior funcione, você precisa de um servidor capaz de enviar atualizações de dados (por exemplo, PHP ou ASP).

A sintaxe da stream de eventos do servidor é muito simples. Defina o cabeçalho "Content-Type" como "text/event-stream". Agora, você pode começar a enviar a stream de eventos.

Código em 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()
%>

Explicação do código:

  • Definir o cabeçalho "Content-Type" como "text/event-stream"
  • Especificar que a página não deve ser armazenada em cache
  • Especificar a data a ser enviada (sempre começa com "data: ")
  • Enviar dados de atualização da página para a web

Objeto EventSource

No exemplo acima, usamos o evento onmessage para obter mensagens. No entanto, também podem ser usados outros eventos:

Evento Descrição
onopen Quando a conexão com o servidor é aberta
onmessage Quando recebe uma mensagem
onerror Quando ocorre um erro