SSE (Server Sent Events) não é amplamente utilizado no mundo do desenvolvimento web, este artigo irá se aprofundar no que é SSE, como funciona e como pode se beneficiar sua aplicação.

O que é SSE?

SSE é uma maneira simples e eficiente de enviar atualizações em tempo real de um servidor para um cliente por meio de uma conexão HTTP. Faz parte da especificação HTML5 e é compatível com todos os navegadores modernos. O SSE é baseado em um fluxo de dados unidirecional, onde o servidor envia mensagens ao cliente, mas o cliente não pode enviar mensagens de volta ao servidor.

SSE usa um formato baseado em texto conhecido como “Eventos enviados pelo servidor” para enviar dados ao cliente. Os dados são enviados como uma série de eventos, cada um contendo uma mensagem e um tipo de evento opcional. O tipo de evento é usado para distinguir entre diferentes tipos de mensagens e permite que o cliente as trate de maneira diferente.

Como funciona o SSE?

O protocolo SSE funciona estabelecendo uma conexão HTTP persistente entre o servidor e o cliente. Esta conexão é mantida aberta enquanto o cliente desejar receber atualizações do servidor. Quando o servidor tem novos dados para enviar, ele envia uma resposta HTTP com um tipo MIME especial “text/event-stream”.

A resposta contém uma série de eventos, cada um deles separado por um caractere de nova linha (“\n”). Cada evento tem o seguinte formato:

event: [event type]\n
data: [message]\n\n

O campo “evento” é opcional e é usado para fornecer um nome para o evento. O campo “dados” contém a mensagem real que está sendo enviada. Os dois caracteres de nova linha no final de cada evento são usados ​​para sinalizar o fim do evento.

Aqui está um exemplo de uma resposta SSE simples:

HTTP/1.1 200 OK
Content-Type: text/event-stream

event: message
data: Hello, world!

event: message
data: This is a test message.

event: customEvent
data: {"foo": "bar", "baz": 123}

Neste exemplo, estamos enviando três eventos para o cliente. Os dois primeiros eventos possuem o tipo de evento “mensagem” e contêm mensagens de texto simples. O terceiro evento tem o tipo de evento “customEvent” e contém um objeto JSON como mensagem.

Quando o cliente recebe uma resposta SSE, ele usa os dados para atualizar sua interface de usuário. Isso pode ser feito usando JavaScript para manipular o DOM, por exemplo.

Implementando SSE

Implementar SSE em seu aplicativo é relativamente simples. Aqui está um exemplo de como implementar SSE usando Node.js e a estrutura Express:

const express = require('express');
const app = express();

// Set up SSE endpoint
app.get('/events', (req, res) => {
  // Set headers
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  // Send initial event
  res.write('data: Connected\n\n');
  // Set interval to send periodic events
  const intervalId = setInterval(() => {
    res.write('data: Hello, world!\n\n');
  }, 1000);
  // Clean up on connection close
  req.on('close', () => {
    clearInterval(intervalId);
  });
});

// Start server
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

Neste exemplo, estamos configurando um endpoint SSE em “/events”. Estamos definindo os cabeçalhos necessários para SSE e enviando um evento inicial ao cliente para confirmar que a conexão foi estabelecida.

Estamos então configurando um intervalo para enviar eventos periódicos ao cliente a cada segundo. Por fim, estamos limpando o intervalo em que a conexão é encerrada pelo cliente.

No lado do cliente, podemos usar o seguinte código JavaScript para escutar eventos SSE:

const source = new EventSource('/events');

source.addEventListener('message', (event) => {
  console.log(event.data);
});
source.addEventListener('error', (event) => {
  console.error('Error:', event);
});

Neste exemplo, estamos criando um novo objeto EventSource e passando a URL do nosso endpoint SSE. Estamos então ouvindo o evento “message” e registrando os dados no console. Também estamos atentos ao evento “erro” caso haja algum problema de conexão.

Observe que o caminho EventSource no front-end só pode ser usado por solicitações GET. Se quiser usar POST e outros métodos HTTP, você mesmo precisará analisar os dados de resposta.

Se você deseja uma implementação nativa do Node.js, aqui está uma

Casos de uso para SSE

SSE pode ser usado em uma ampla variedade de aplicações que requerem atualizações em tempo real. Aqui estão alguns exemplos:

• Plataformas de mídia social: o SSE pode ser usado para fornecer atualizações em tempo real para plataformas de mídia social, como notificações de novas mensagens, comentários ou curtidas.

• Aplicativos financeiros: o SSE pode ser usado para fornecer atualizações em tempo real para aplicativos financeiros, como preços de ações, taxas de câmbio ou notícias.

• Jogos online: o SSE pode ser usado para fornecer atualizações em tempo real para aplicativos de jogos online, como notificações de eventos de jogos, pontuações ou classificações.

Benefícios de usar SSE

Há vários benefícios em usar o SSE em relação a outros métodos de comunicação em tempo real, como polling ou WebSockets:

Eficiência

SSE usa uma conexão HTTP persistente, o que significa que a sobrecarga de estabelecer e manter a conexão é muito menor do que com outros métodos. Isto torna a SSE mais eficiente e menos intensiva em recursos, o que é especialmente importante quando se lida com um grande número de clientes.

Simplicidade

SSE é um protocolo simples, fácil de entender e implementar. Não requer nenhuma biblioteca ou estrutura especial e pode ser implementado usando tecnologias web padrão, como JavaScript e HTTP.

Confiabilidade

SSE é um protocolo confiável que fornece reconexão automática em caso de interrupção da rede. Isso garante que o cliente continuará recebendo atualizações mesmo se a conexão for temporariamente perdida.

Conclusão

Eventos enviados por servidor (SSE) são uma maneira simples e eficiente de enviar atualizações em tempo real de um servidor para um cliente por meio de uma conexão HTTP. Faz parte da especificação HTML5 e é compatível com todos os navegadores modernos. O SSE usa um fluxo de dados unidirecional, onde o servidor envia mensagens ao cliente, mas o cliente não pode enviar mensagens de volta ao servidor. Isso evita que você pesquise constantemente eventos no servidor, o que não apenas melhora o desempenho, mas também reduz a complexidade.

Se você achou isso útil, considere assinar meu boletim informativo para artigos e ferramentas mais úteis sobre desenvolvimento web. Obrigado por ler!