Server-Sent Events em JavaScript: Tempo real sem WebSocket

O que são Server-Sent Events e por que você precisa deles?

\n\n

Imagine: você abriu um site com cotações de moedas e a taxa do dólar muda diante dos seus olhos — sem recarregar a página, sem clicar em botões. Ou você está aguardando o resultado do processamento de um arquivo grande no servidor e, de repente, aparece uma linha: "Pronto em 70%". Como isso funciona? Uma das maneiras mais elegantes é Server-Sent Events (SSE).

\n\n

SSE é uma tecnologia que permite ao servidor enviar dados ao cliente de forma autônoma a qualquer momento, assim que eles estiverem disponíveis. Ao contrário do WebSocket, o SSE funciona apenas em uma direção — do servidor para o cliente. Mas é aí que está seu superpoder: ele é incrivelmente simples, eficiente e ideal para tarefas onde o cliente precisa apenas receber atualizações.

\n\n

Neste artigo, vamos entender como usar Server-Sent Events em JavaScript, escrever código funcional e descobrir quando o SSE é a melhor escolha e quando é melhor considerar o WebSocket. Prontos? Vamos lá!

\n\n

Como funcionam os Server-Sent Events (SSE)?

\n\n

Tecnicamente, SSE é simplesmente uma conexão HTTP que o servidor não fecha após enviar a resposta. Em vez disso, ele envia dados em partes, usando o formato especial text/event-stream. O cliente (navegador) escuta essa conexão através do objeto EventSource e gera eventos ao receber cada nova mensagem.

\n\n

Veja como é uma resposta típica do servidor:

\n\n

data: {"message": "Olá!", "timestamp": 1700000000}\n\ndata: {"message": "Nova notificação", "timestamp": 1700000001}

\n\n

Cada mensagem começa com data:, seguido por um espaço e o conteúdo em si. As mensagens são separadas por dois caracteres de nova linha \\n\\n. O servidor também pode enviar identificadores (id:) e tipos de evento (event:), mas o conjunto mínimo é data.

\n\n

A parte do cliente é ainda mais simples:

\n\n

const eventSource = new EventSource('/events');\n\neventSource.onmessage = (e) => {\n    console.log('Dados recebidos:', e.data);\n};\n\neventSource.onerror = (e) => {\n    console.error('Erro de conexão', e);\n};

\n\n

Pronto! Sem handshakes complicados, sem bibliotecas — o navegador se reconecta automaticamente em caso de queda e lida com a perda de conexão. Essa é a mágica principal dos Server-Sent Events.

\n\n

SSE vs WebSocket: quando escolher qual?

\n\n

Muitas vezes, iniciantes pensam: "Já que SSE é mais simples, então é sempre melhor". Mas não é bem assim. Cada tecnologia tem seu nicho. Vamos comparar.

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Característica	SSE	WebSocket
Direção dos dados	Apenas servidor → cliente	Bidirecional
Facilidade de implementação	Muito simples (nativo do navegador)	Média (requer biblioteca)
Reconexão automática	Integrada	Precisa ser implementada manualmente
Suporte dos navegadores	Todos os modernos (exceto IE)	Blogs Como passar na entrevista de TypeScript: principais perguntas Programação Assíncrona em Kotlin: guia completo Guia de geração de GUID/UUID em JavaScript: da teoria ao código Book Recommendations JavaScript Profissional (Node.js): técnicas avançadas C++ Assíncrono: guia completo Arquitetura de Aplicações PHP: Do Simples ao Complexo Swift Profissional (iOS/macOS): técnicas avançadas Leia também Docker e Rust: conteinerização de aplicações para produção Monorepositório com Java: organização de código e melhores práticas Code review em Kotlin: o que verificar e como dar feedback para iniciantes Docker e Java: conteinerização de aplicações do A ao Z Os 10 melhores frameworks JavaScript para desenvolvimento web em 2024 🍪 Сначала примите условия Чтобы войти на сайт, необходимо принять соглашение об использовании файлов cookie. Мы используем их для авторизации и улучшения работы сайта. Политика конфиденциальности Принять и продолжить Закрыть 🍪 Мы используем файлы cookie для авторизации, аналитики и улучшения работы сайта. Продолжая пользоваться сайтом, вы соглашаетесь с нашей политикой конфиденциальности. Принять Только необходимые