Sobre o projeto
Real-time Visitor Counter in Turbo Monorepo é um projeto de código aberto que demonstra rastreamento de visitantes em tempo real usando WebSockets. A aplicação conta visitantes únicos por "sala" (URL) e agrega totais entre todas as salas ativas.
Arquitetura: O projeto segue layout de monorepo Turborepo. O frontend está em client/ como aplicação Vue 3 + Vite. O backend reside em server/ como Cloudflare Worker apoiado por Durable Objects para estado persistente e em tempo real. Comunicação entre camadas ocorre via WebSockets.
Recursos:
- Contagem de visitantes por sala baseada na URL do navegador atual
- Contagem global de visitantes entre todas as salas ativas simultaneamente
- Troca dinâmica de ambiente: desenvolvimento usa ws://localhost:8787, produção usa wss:// URLs configuradas
- Servidor de desenvolvimento com recarregamento automático via turbo dev
Stack tecnológica:
- Frontend: Vue 3, Vite
- Backend: Cloudflare Workers, Cloudflare Durable Objects
- Orquestração de monorepo: Turborepo
- Gerenciador de pacotes: pnpm
Pré-requisitos:
- Node.js e pnpm
- Conta Cloudflare com Workers habilitados
- CLI wrangler instalado globalmente
- Turborepo instalado globalmente
Instalação e configuração:
1. Clone o repositório e execute pnpm install na raiz.
2. Instale turbo e wrangler globalmente via pnpm.
3. Autentique wrangler com wrangler login.
4. Configure wrangler.toml nos diretórios client/ e server/.
5. Execute turbo dev para iniciar servidor de desenvolvimento e worker local.
6. Visite http://localhost:5175 em múltiplas abas ou dispositivos para observar atualizações em tempo real.
Implantação é feita via turbo deploy a partir do diretório apps/worker relevante.
Demo: https://wsdemo.cvyl.me
Repositório: cvyl/cloudflare-websocket-livecount
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.