WebSockets em Tempo Real sem Redis: Usando Cloudflare Durable Objects no Nuxt 4

Construir funcionalidades em tempo real (como notificações instantâneas, cursores colaborativos ou dashboards ao vivo) sempre foi um dos maiores pesadelos em arquiteturas serverless.

Tradicionalmente, a receita para suportar WebSockets exigia:

1. Um cluster de servidores Node.js dedicados sempre ligados.
2. Um cluster Redis com Pub/Sub para sincronizar mensagens entre instâncias.
3. Um balanceador de carga configurado para conexões persistentes (Sticky Sessions).

O custo mensal dessa infraestrutura mínima raramente ficava abaixo de centenas de dólares. O Nuxfire resolve esse desafio utilizando Cloudflare Durable Objects.

O que são Cloudflare Durable Objects?

Durable Objects fornecem computação serverless com estado coordenado. Cada objeto roda como uma instância única na rede global da Cloudflare, garantindo que todas as conexões para o mesmo "canal" ou "sala" cheguem ao mesmo processo de memória.

Além disso, cada Durable Object possui seu próprio banco SQLite embarcado, permitindo persistir o histórico de mensagens com latência abaixo de 1 milissegundo.

[Usuário A (Navegador)] ──WebSockets──> ┌────────────────────────────────┐
                                       │ Cloudflare Durable Object      │
[Usuário B (Navegador)] ──WebSockets──> │ - Estado de conexões em RAM    │
                                       │ - Banco SQLite Embarcado       │
[Webhook / Worker Backend] ──Fetch────> └────────────────────────────────┘

Segurança Robusta: Handshake com Tickets Assinados por HMAC

Conexões WebSockets não transmitem headers HTTP normais após o handshake inicial. Para garantir segurança máxima contra conexões forjadas, o Nuxfire utiliza tickets assinados criptograficamente:

1. O cliente faz uma requisição HTTP autenticada solicitando um ticket de conexão.
2. O servidor gera um token com HMAC assinado usando a chave secreta da aplicação e com validade de 60 segundos.
3. O cliente abre a conexão WebSocket passando o ticket na query string.
4. O Durable Object valida a assinatura antes de aceitar o handshake.

// Gerando o ticket assinado no endpoint de autenticação
export function generateWebSocketTicket(userId: string, workspaceId: string) {
  const expiresAt = Date.now() + 60 * 1000;
  const payload = `${userId}:${workspaceId}:${expiresAt}`;
  const signature = createHmac("sha256", env.WS_SECRET).update(payload).digest("hex");
  return `${payload}:${signature}`;
}

Consumindo no Frontend com Nuxt Composables

No lado do cliente Nuxt 4, conectar-se ao canal da equipe é tão simples quanto usar um composable nativo:

<script setup lang="ts">
const { messages, status, send } = useTeamWebSockets();

function handleNotify() {
  send({ type: "TEAM_PING", content: "Nova tarefa criada no quadro!" });
}
</script>

<template>
  <div>
    <UBadge :color="status === 'OPEN' ? 'success' : 'neutral'">
      {{ status === 'OPEN' ? 'Tempo Real Ativo' : 'Reconectando...' }}
    </UBadge>
    <div v-for="msg in messages" :key="msg.id">
      {{ msg.content }}
    </div>
  </div>
</template>

Conclusão: Tempo Real de Nível Enterprise ao seu Alcance

Com os Durable Objects, você elimina completamente os custos de servidores Redis e Socket.io, aproveitando a rede global da Cloudflare para entregar uma experiência ultra-rápida aos seus usuários.

Todo esse fluxo — desde os workers de backend até os composables reativos do Nuxt — já vem 100% implementado e testado no Nuxfire.

Garanta sua licença vitalícia e baixe o código agora mesmo →