HTML5 - eventos enviados pelo servidor
Os aplicativos da web convencionais geram eventos que são despachados para o servidor da web. Por exemplo, um simples clique em um link solicita uma nova página do servidor.
Os tipos de eventos que fluem do navegador da web para o servidor da web podem ser chamados de eventos enviados pelo cliente.
Junto com HTML5, WHATWG Web Applications 1.0 apresenta eventos que fluem do servidor da web para os navegadores da web e são chamados de eventos enviados pelo servidor (SSE). Usando o SSE, você pode enviar eventos DOM continuamente do seu servidor da web para o navegador do visitante.
A abordagem de streaming de eventos abre uma conexão persistente com o servidor, enviando dados ao cliente quando novas informações estão disponíveis, eliminando a necessidade de pesquisa contínua.
Os eventos enviados pelo servidor padronizam a forma como transmitimos os dados do servidor para o cliente.
Aplicativo da Web para SSE
Para usar eventos enviados pelo servidor em um aplicativo da web, você precisa adicionar um elemento <eventsource> ao documento.
o src atributo do elemento <eventsource> deve apontar para uma URL que deve fornecer uma conexão HTTP persistente que envia um fluxo de dados contendo os eventos.
A URL apontaria para um PHP, PERL ou qualquer script Python que se encarregaria de enviar dados do evento de forma consistente. A seguir está um exemplo simples de aplicativo da web que espera o tempo do servidor.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
/* Define event handling logic here */
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker">
<TIME>
</div>
</body>
</html>Script do lado do servidor para SSE
Um script do lado do servidor deve enviar Content-typeheader especificando o tipo text / event-stream como segue.
print "Content-Type: text/event-stream\n\n";Depois de definir o tipo de conteúdo, o script do lado do servidor enviaria um Event: tag seguida do nome do evento. O exemplo a seguir enviaria Server-Time como nome de evento encerrado por um caractere de nova linha.
print "Event: server-time\n";A etapa final é enviar dados do evento usando Data: tag que seria seguida por um número inteiro de valor de string terminado por um caractere de nova linha, como segue -
$time = localtime();
print "Data: $time\n";Finalmente, a seguir está ticker.cgi completo escrito em Perl -
#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true) {
print "Event: server-time\n";
$time = localtime();
print "Data: $time\n";
sleep(5);
}Lidar com eventos enviados pelo servidor
Vamos modificar nosso aplicativo da web para lidar com eventos enviados pelo servidor. A seguir está o exemplo final.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
document.getElementsByTagName("eventsource")[0].addEventListener("server-time",
eventHandler, false);
function eventHandler(event) {
// Alert time sent by the server
document.querySelector('#ticker').innerHTML = event.data;
}
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker" name = "ticker">
[TIME]
</div>
</body>
</html>Antes de testar os eventos enviados pelo servidor, eu sugiro que você verifique se o seu navegador da web suporta esse conceito.