Criando um feed de notificações em tempo real

Um fluxo de notificações em tempo real combina um fluxo SSE para as notificações recebidas com endpoints REST para marcar itens como lidos. O componente mantém o estado local da lista de notificações, assina o fluxo do servidor usando EventSource em um useEffect e lida com as interações do usuário (marcar como lida, dispensar) com atualizações otimistas.

Um objeto de notificação geralmente tem o seguinte formato: { id: string, type: 'info' | 'warning' | 'success', message: string, timestamp: string, read: boolean }. O campo type determina o ícone e a cor. O campo read indica se o usuário reconheceu a notificação. O campo timestamp permite agrupar as notificações por período.

Em um useEffect, crie um EventSource conectado a /api/notifications/stream. A cada evento de mensagem, analise o JSON e adicione a nova notificação no início do estado: setNotifications(prev => [JSON.parse(e.data), ...prev]). Adicionar no início coloca a notificação mais recente no topo, o que é padrão em fluxos de notificações.

Calcule a contagem de não lidas a partir da matriz de notificações, sem manter um estado adicional: const unreadCount = notifications.filter(n => !n.read).length. Exiba esse valor como um distintivo no ícone do sino de notificações. A contagem é atualizada automaticamente sempre que o estado das notificações muda — não é necessário gerenciar um estado separado.

Quando o usuário clica em uma notificação, aplique imediatamente uma atualização otimista de leitura: setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n)). Em seguida, envie uma solicitação PATCH para /api/notifications/:id com { read: true } em segundo plano. Reverta a atualização otimista se a solicitação falhar.

Agrupe as notificações para exibição: "Hoje" (no mesmo dia do calendário), "Ontem" e "Mais antigas". Calcule o grupo usando a marca temporal da notificação e a data atual: const today = new Date().toDateString(). Renderize cada grupo como uma seção separada com um rótulo de cabeçalho. Isso facilita muito a consulta de uma lista longa de notificações.

Quando o usuário estiver em outra página e uma nova notificação chegar por SSE, mostre um aviso temporário em vez de atualizar a lista de notificações ou além dessa atualização. Use um contexto global de notificações ou um armazenamento Zustand que possa ser acessado tanto pelo assinante SSE quanto pelo componente que renderiza os avisos. O aviso desaparece após alguns segundos; a notificação permanece na lista.

Para notificações que aparecem em todo o aplicativo, armazene-as em um contexto do React ou em um armazenamento Zustand no nível raiz do aplicativo. A assinatura SSE fica em um componente provedor próximo ao topo da árvore. Qualquer componente pode ler as notificações ou enviar novas por meio do armazenamento compartilhado, permitindo renderizar avisos a partir de qualquer página.

EventSource lida automaticamente com a reconexão quando a rede cai, mas as mudanças na visibilidade da aba são diferentes. Quando o usuário volta a uma aba após uma longa ausência, a conexão SSE pode ter sido encerrada pelo servidor. EventSource reconecta automaticamente — e o mecanismo do ID do último evento reenvia todas as notificações que o usuário perdeu enquanto a aba estava em segundo plano.

Aplicativos de página única perdem o estado das notificações mantido na memória quando o usuário sai da página. Armazene as notificações em localStorage após cada atualização: localStorage.setItem('notifications', JSON.stringify(notifications)). Ao montar o componente, inicialize o estado a partir de localStorage antes que o fluxo SSE se conecte. Isso preserva o histórico de notificações durante a navegação entre páginas.

O ponto de acesso SSE no servidor deve definir cabeçalhos específicos: Content-Type: text/event-stream, Cache-Control: no-cache e Connection: keep-alive. No Express/NestJS, escreva os eventos como data: ${JSON.stringify(payload)}\n\n — observe a quebra de linha dupla, que sinaliza o fim de um evento. O servidor deve liberar o conteúdo após cada escrita para garantir que o navegador receba o evento imediatamente.

Qual é o cabeçalho de tipo de conteúdo correto para um ponto de acesso SSE (eventos enviados pelo servidor)?

Os fluxos de notificações combinam uma assinatura SSE (useEffect com limpeza de EventSource) com alterações REST (PATCH para marcar como lida). Formato dos dados: {identificador, tipo, mensagem, marca temporal, lido}. Calcule unreadCount por meio de uma filtragem e agrupe por hoje/ontem/mais antigas para exibição. Use um contexto global ou Zustand para avisos entre páginas. Persista os dados em localStorage para preservar as notificações durante a navegação. O ponto de acesso SSE exige Content-Type: text/event-stream, Cache-Control: no-cache e delimitadores de eventos com quebra de linha dupla.