Sobre el proyecto
Real-time Visitor Counter in Turbo Monorepo es un proyecto de código abierto que demuestra el seguimiento en vivo de visitantes mediante WebSockets. La aplicación cuenta visitantes únicos por URL "sala" y agrega totales entre todas las salas activas.
Arquitectura: El proyecto sigue una estructura de monorepo Turborepo. El frontend reside en client/ como una aplicación Vue 3 + Vite. El backend está en server/ como un Cloudflare Worker respaldado por Durable Objects para estado persistente y en tiempo real. La comunicación entre capas ocurre a través de WebSockets.
Características:
- Conteo de visitantes por sala basado en la URL actual del navegador
- Contador global de visitantes entre todas las salas activas simultáneamente
- Cambio dinámico de entorno: desarrollo usa ws://localhost:8787, producción usa wss:// URLs configuradas
- Servidor de desarrollo con recarga rápida mediante turbo dev
Stack tecnológico:
- Frontend: Vue 3, Vite
- Backend: Cloudflare Workers, Cloudflare Durable Objects
- Orquestación de monorepo: Turborepo
- Gestor de paquetes: pnpm
Requisitos previos:
- Node.js y pnpm
- Cuenta de Cloudflare con Workers habilitados
- CLI wrangler instalado globalmente
- Turborepo instalado globalmente
Instalación y configuración:
1. Clona el repositorio y ejecuta pnpm install desde la raíz.
2. Instala turbo y wrangler globalmente mediante pnpm.
3. Autentica wrangler con wrangler login.
4. Configura wrangler.toml en ambos directorios client/ y server/.
5. Ejecuta turbo dev para iniciar el servidor de desarrollo y el worker local.
6. Visita http://localhost:5175 en múltiples pestañas o dispositivos para observar actualizaciones en tiempo real.
El despliegue se gestiona mediante turbo deploy desde el directorio apps/worker relevante.
Demo: https://wsdemo.cvyl.me
Repositorio: cvyl/cloudflare-websocket-livecount
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.