Frontend Academy · Aula

Eventos enviados pelo servidor para transmissão unidirecional

Utilizar EventSource para receber um fluxo de eventos enviados pelo servidor, analisar tipos e dados de eventos e restabelecer automaticamente a ligação após interrupções de rede.

Eventos enviados pelo servidor para transmissão unidirecional é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que são Server-Sent Events?

SSE é um protocolo padrão baseado em HTTP que permite ao servidor enviar eventos ao navegador por meio de uma única conexão de longa duração. Unidirecional: somente do servidor para o cliente. É mais simples do que WebSockets quando não é necessário enviar dados de volta.

API EventSource

O EventSource do navegador conecta-se a uma URL e escuta eventos. É padrão, integrado e não requer biblioteca.

const es = new EventSource('/api/events');

es.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

es.addEventListener('error', () => {
  console.error('Connection error');
});

Formato da resposta do servidor

O servidor envia um fluxo de texto simples com Content-Type: text/event-stream. Cada mensagem começa com data: e termina com uma linha em branco.

// Server response:
Content-Type: text/event-stream
Cache-Control: no-cache

data: hello\n\n
data: another message\n\n
data: {"type":"chat","text":"Hi"}\n\n

Eventos nomeados

O servidor pode nomear eventos com event:. O navegador os dispara com esse nome.

// Server:
event: chat
data: {"user":"Alice","text":"Hi"}\n\n

event: user-joined
data: {"name":"Bob"}\n\n

// Client:
es.addEventListener('chat', (e) => { /* ... */ });
es.addEventListener('user-joined', (e) => { /* ... */ });

Reconexão automática

EventSource reconecta automaticamente quando ocorre uma desconexão (após aproximadamente 3 segundos). O servidor pode sugerir um intervalo com retry: 5000.

// Server:
retry: 5000\n
data: hello\n\n

IDs de eventos e retomada

O servidor envia id: com cada evento. Após a reconexão, o navegador envia o último ID recebido no cabeçalho Last-Event-ID; o servidor pode retomar o envio a partir desse ponto.

// Server:
id: 42
event: chat
data: {"text":"Hi"}\n\n

id: 43
event: chat
data: {"text":"How are you?"}\n\n

// Client reconnect sends: Last-Event-ID: 43

Analisando JSON

event.data é sempre uma string. Analise o JSON por conta própria.

es.addEventListener('chat', (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.user, msg.text);
});

Encerrando a conexão

Chame es.close() para interromper. Os navegadores também encerram a conexão quando a aba é fechada.

es.close();

// In React, close in useEffect cleanup:
useEffect(() => {
  const es = new EventSource('/events');
  es.onmessage = (e) => setData(d => [...d, e.data]);
  return () => es.close();
}, []);

Casos de uso

Painéis ao vivo (métricas e monitoramento). Notificações (novos e-mails e alertas). Cotações de ações. Conclusões de chat de IA (cada token = um evento). Placar de esportes ao vivo. Atualizações de status de tarefas de longa duração.

Exemplo real: transmissão de IA

As conclusões da OpenAI/Anthropic são transmitidas como SSE. Cada token chega como um evento de dados; renderize progressivamente para criar um efeito de digitação.

const es = new EventSource('/api/chat?prompt=hello');
let text = '';
es.addEventListener('message', (e) => {
  if (e.data === '[DONE]') {
    es.close();
    return;
  }
  const { delta } = JSON.parse(e.data);
  text += delta;
  setMessage(text);
});

SSE vs WebSocket vs consulta periódica

SSE: baseado em HTTP, somente do servidor para o cliente, reconexão automática e simples. WebSocket: duplex completo, menor sobrecarga por mensagem e mais complexo. Consulta periódica: mais simples, mas com maior latência e carga. Escolha SSE para transmissões unidirecionais; use WS para comunicação bidirecional no estilo de um chat.

Limites do navegador e proxies

Os navegadores limitam o número de conexões SSE simultâneas por origem (cerca de 6). Alguns proxies corporativos e balanceadores de carga antigos armazenam as respostas em buffer, interrompendo o funcionamento do SSE; teste nos ambientes de destino. Use HTTPS para evitar a maior parte do armazenamento em buffer dos proxies.

CORS para SSE

EventSource respeita CORS. O servidor deve enviar Access-Control-Allow-Origin. Para credenciais, passe { withCredentials: true } ao construtor de EventSource e defina Access-Control-Allow-Credentials: true no servidor.

Verificação rápida

Qual é a principal diferença entre Server-Sent Events e WebSockets?

Recapitulação: Server-Sent Events

EventSource abre um fluxo HTTP de eventos text/event-stream. O servidor envia mensagens data: com um nome de evento event: e um ID id: opcionais. Há reconexão automática com retomada usando Last-Event-ID. A comunicação é unidirecional (servidor → cliente). É uma ótima opção para painéis ao vivo, transmissão de IA e notificações. É mais simples do que WebSocket quando não é necessária comunicação bidirecional. Observe os limites de conexões simultâneas e o armazenamento em buffer dos proxies.

Perguntas Frequentes

A aula “Eventos enviados pelo servidor para transmissão unidirecional” é grátis?

Sim — o texto completo de “Eventos enviados pelo servidor para transmissão unidirecional” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Eventos enviados pelo servidor para transmissão unidirecional”?

Utilizar EventSource para receber um fluxo de eventos enviados pelo servidor, analisar tipos e dados de eventos e restabelecer automaticamente a ligação após interrupções de rede. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Eventos enviados pelo servidor para transmissão unidirecional”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

API WebSocket: abrir, mensagem, fechar e erro
Integração do cliente Socket.io
Eventos enviados pelo servidor para transmissão unidirecional
Padrões de interface em tempo real

← Voltar para Frontend Academy