English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 Eventos enviados pelo servidor (server-sent event) permite que a página web obtenha os dados mais recentes do servidor, sem precisar recarregar a página, permitindo obter dados dinâmicos mais recentes.
Server-O evento Enviado (Sent event) permite que a página web obtenha atualizações de dados do servidor automaticamente, sem precisar recarregar a página.
Os métodos tradicionais de obtenção dos dados mais recentes do servidor são através de recarregamento ou uso de timers para acionar, para obter os dados mais recentes. Agora, através de eventos enviados pelo servidor Server-Ao enviar eventos, é possível obter automaticamente os dados mais recentes.
Exemplo: Facebook/Atualizações do Twitter, cotações de ações, microblogs, resultados de eventos esportivos, mensagens dinâmicas, comentários, etc.
Todos os navegadores populares suportam eventos enviados pelo servidor, exceto o Internet Explorer.
O objeto EventSource é usado para receber notificações de eventos enviados pelo servidor:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础教程网(oldtoolbag.com)</title>
</head>
<body>
<h1>Obter os dados mais recentes do servidor</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="Desculpe, seu navegador não suporta server-sent event...";
}
</script>
</body>
</html>Teste e veja ‹/›Análise do exemplo:
Crie um novo objeto EventSource, especificando o URL da página que envia as atualizações (no exemplo, "demo_sse.php")
Cada vez que receber uma atualização, ocorrerá o evento onmessage
Quando o evento onmessage ocorrer, insira os dados recebidos no elemento com id "result"
Neste exemplo, escrevemos um código extra para detectar o suporte do navegador aos eventos de envio do servidor:
if(typeof(EventSource)!=="undefined")
{
// O navegador suporta Server-Enviado
// algum código.....
}
else
{
// O navegador não suporta Server-Enviado..
}Para que o exemplo acima funcione, você também precisa de um servidor que possa enviar atualizações de dados (por exemplo, PHP e ASP).
A sintaxe de eventos de fluxo no servidor é muito simples. Coloque "Content-Type" cabeçalho configurado para "text/event-stream". Agora, você pode começar a enviar eventos de fluxo.
<?php
header(&39;Content-Type: text/event-stream&39;);
header(&39;Cache-Control: no-cache&39;);
$time = date(&39;r&39;);
echo "data: The server current time: {$time}\n\n";
flush();
?>Código ASP (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: The server current time" & now())
Response.Flush()
%>Explicação do Código:
Incluir o cabeçalho "Content-Type" definido como "text/event-stream"
Especificar que a página não deve ser armazenada em cache
Emitir a data de envio (sempre começa com "data: ")
Emitir dados para a atualização da página da web
No exemplo acima, usamos o evento onmessage para obter mensagens. No entanto, também podemos usar outros eventos:
| Evento | Descrição |
| onopen | Quando a conexão com o servidor é aberta |
| onmessage | Quando recebe uma mensagem |
| onerror | Quando ocorre um erro |