📅 Conexão KingHost 🚀 Especial Mês das Mulheres - Aulas para apoiar o empreendedorismo feminino 💰

Kinghost | Blog

Server-Sent Events: o que é e como usar

Publicado em 12/03/2018

Atualizado em 31/01/2024
Server-Sent Events

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:

// 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:

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:

source.addEventListener('teste', function(e) {
console.warn('ok');
});

Para suportar CORS (Cross-Origin Resource Sharing) basta incluir um argumento opcional ao instanciar o objeto`EventSource`:

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.

E se você busca conhecimento gratuito, uma excelente opção é o Conexão KingHost: uma plataforma repleta de conteúdos relevantes. São diversas aulas em formato de vídeo com foco em empreendedorismo, gestão, marketing digital, design e presença digital. Confira!

Não perca a oportunidade, são conteúdos gratuitos que irão ajudar o seu negócio a evoluir no digital! Clique no banner abaixo e saiba mais!

O que você achou deste conteúdo?

O que você achou deste conteúdo?

Rodrigo

Rodrigo Hahn

Creates software at KingHost. Has a theoretical degree in physics.

Rodrigo

Rodrigo Hahn

Creates software at KingHost. Has a theoretical degree in physics.

Compartilhe esse conteúdo com alguém que possa gostar também

Conteúdos relacionados

Ao criar um site, uma das decisões mais importantes é escolher o tipo de hospedagem adequado. Afinal, ela exerce um papel fundamental no desempenho, na segurança e na acessibilidade do seu site para os visitantes. Atualmente, existem diversos tipos de hospedagem disponíveis no mercado, cada um com suas características únicas. Confira este artigo para ter...
Phishing (pronunciado: fishing) é um tipo de crime virtual, onde pessoas mal intencionadas tentam enganar outras pessoas e obter informações sensíveis delas. Segundo relatório da Kaspersky, o Brasil foi o país mais atacado por phishing pelo WhatsApp, com mais de 76 mil tentativas de fraudes. Assim, você que está lendo esse artigo, provavelmente já sofreu alguma...

📅 Aulão GRATUITO 🚀 Como VENDER MAIS na internet 💰

Mensagens para você