📅 Conexão KingHost 🚀 Conteúdos exclusivos para o seu negócio evoluir no digital 💰

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...
As ameaças virtuais estão mudando constantemente e se tornando cada dia mais sofisticadas. Por isso, para quem tem um negócio online, a segurança é um ponto que merece grande atenção. De acordo com o Relatório do Sitelock que analisou 14 milhões de sites em 2022, sites recebem cerca de 5.5 vezes mais tráfego de bots...

Assine a nossa newsletter e receba conteúdos para apoiar o crescimento do seu negócio

Sem Título(obrigatório)

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

Mensagens para você