Server-Sent Events: o que é e como usar
Neste artigo vou explicar a tecnologia SSE – Server-Sent Events que permite trabalhar com conexões em páginas da web de uma maneira diferente do convencional. Com SSE, o servidor pode enviar dados para uma página a qualquer momento na forma de mensagens, que são recebidas automaticamente pelo navegador, e que podem ser acessadas dentro do JavaScript através de uma API chamada EventSource.
O que é Server-Sent Events?
A Internet é construída em cima de diversos padrões. Um dos mais importantes é o protocolo HTTP (Hyper Text Transfer Protocol), que descreve o funcionamento da interação entre cliente e servidor. De um modo geral, a web funciona de forma linear, isto é, o cliente solicita um recurso ao servidor, e este retorna para o cliente. No entanto, alguns tipos de aplicações web dependem de atualizações frequentes, como feeds de redes sociais e sites estilo “minuto-a-minuto”. Este tipo de fluxo já era possível, mas o navegador tinha que ficar acessando o servidor continuamente (em inglês, pooling) em busca de novas atualizações.
Como eu uso?
A implementação do SSE nos navegadores define uma API chamada EventSource. Esta API mantém aberta a conexão com o servidor e oferece métodos para gerenciar e fechar conexões, receber dados e tratar eventuais erros. Para usar esta API, deve-se criar (no cliente) um objeto do tipo EventSource e registrar alguns eventos:
|
1 2 3 4 5 6 7 |
// cria a conexão persistente var source = new EventSource('meu-updater.php'); // define um evento que é executado quando o servidor envia uma mensagem source.onmessage = function (event) { console.log(event.data); }; |
Com a conexão estabelecida, o cliente está pronto para receber mensagens do servidor. A implementação é barbada: o documento retornado deve ter o Content-Type text/event-stream, e o corpo deve seguir um formato simples, explicado logo adiante. Um exemplo de servidor (em PHP) segue abaixo:
|
1 2 3 4 5 6 7 8 9 |
header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $num = 0; for (;;) { echo "Numero agora: {$num}"; $num++; flush(); sleep(1); } |
A resposta dada pelo servidor acima é a seguinte:
data: Numero agora: 0
e depois:
data: Numero agora: 1
e assim por diante.
O corpo do retorno enviado pelo servidor deve estar de acordo com o seguinte formato:
* data: texto que se quer retornar. Quando for retornado, vai acionar o evento onMessage que foi definido no cliente. Esse texto pode ser qualquer tipo de dado em formato texto: uma string, numeros, JSON, XML, etc.
* retry: especifica o intervalo entre tentativas de reconexão em caso de erros. Informado em millisegundos. O navegador tenta reconectar automaticamente respeitando esse valor.
* id": Identificação única usado para definir a sequência dos eventos. Ao informar um id, o navegador sabe qual foi o ultimo evento disparado, e automaticamente envia um header Last-Event-Id na tentativa de reconexão. O servidor pode usar este header para saber quais dados deve enviar para o cliente (por exemplo, em qual ponto do feed estava).
* event: usado para criar eventos personalizados.
O tipo de evento pode ser capturado dentro do JavaScript com um EventListener padrão, buscando pelo nome deste. Por exemplo, o servidor pode retornar o seguinte:
event: teste
data: “dados de teste”
Neste caso, pra capturar este evento no cliente, pode-se utilizar:
|
1 2 3 |
source.addEventListener('teste', function(e) { console.warn('ok'); }); |
Para suportar CORS (Cross-Origin Resource Sharing) basta incluir um argumento opcional ao instanciar o objetoEventSource:
|
1 2 3 |
var es = new EventSource('servidor.php', { withCredentials: true }); |
A API do SSE também oferece outros eventos de controle de erro e conexão: onOpen (quando a conexão com o servidor foi aberta) e onError (quando ocorre um erro de conexão).
Comparação com outras alternativas
AJAX (programming) é um conjunto de tecnologias web que possibilita disparar requisições em background, sem recarregar a página, usando JavaScript. O AJAX usa conexões HTTP/HTTPS normais, e cria uma conexão para cada solicitação que for feita para o servidor. O SSE cria menos tráfego que AJAX pooling, já que o servidor só envia dados para o cliente quando existe algo novo para enviar. Isso reduz o número de conexões necessárias, o que pode ocasionar melhor desempenho.
Websockets é outra tecnologia que possibilita comunicações entre cliente/servidor. Ambos são bidirecionais, mas SSE funciona com HTTP normal, enquanto websockets usam um protocolo diferente. Como o formato das mensagens é definido pela aplicação, o overhead é potencialmente menor do que o SSE; além disso, as mensagens podem trafegar comprimidas e websockets não obriga o uso de TLS. Isso também significa que tudo que pode ser feito com SSE pode também ser feito com websockets. Apesar disso, o SSE é mais fácil de implementar, e usa a mesma segurança HTTP.
Compatibilidade do Server-Sent Events
A API que implementa o uso de SSE foi publicada como um padrão do WHATWG e é implementada pela maioria dos navegadores. SSE ainda não é suportado nativamente no MS Edge, mas está como Under Consideration, ou seja, é provável que seja implementado nas próximas versões.
Pessoal, espero que tenham gostado do artigo sobre Server-Sent Events. Caso tenham alguma dúvida, deixe nos comentários, que terei prazer em responder! Em breve, mais conteúdos meus aqui no Blog da KingHost.
- 10 ótimos sites de placeholder para usar em seus projetos web - 20 de abril de 2021
- Criando sites estáticos com Jekyll - 12 de setembro de 2018
- Utilizando CSS Variables (Custom Properties) - 25 de junho de 2018
