这个项目能做什么
Real-time Visitor Counter in Turbo Monorepo 是一个开源项目,使用 WebSockets 实现实时访客追踪。应用根据当前浏览器 URL 按“房间”统计独立访客,并聚合所有活跃房间的总访客数。
架构:项目采用 Turborepo 单体仓库结构。前端位于 client/,为 Vue 3 + Vite 应用;后端位于 server/,为基于 Cloudflare Worker 和 Durable Objects 的服务,用于持久化实时状态。前后端通过 WebSocket 通信。
功能:
- 按当前浏览器 URL 房间统计访客数
- 跨所有活跃房间的全局访客总数
- 动态环境切换:开发环境使用 ws://localhost:8787,生产环境使用 wss:// 配置的 URL
- 通过 turbo dev 启动热重载开发服务器
技术栈:
- 前端:Vue 3, Vite
- 端:Cloudflare Workers, Cloudflare Durable Objects
- 单体仓库管理:Turborepo
- 包管理器:pnpm
前置条件:
- Node.js 和 pnpm
- 用 Workers 的 Cloudflare 账户
- 全局安装 wrangler CLI
- 全局安装 Turborepo
安装与设置:
1. 克隆仓库并在根目录运行 pnpm install。
2. 使用 pnpm 全局安装 turbo 和 wrangler。
3. 使用 wrangler login 登录认证。
4. 在 client/ 和 server/ 目录下配置 wrangler.toml。
5. 运行 turbo dev 启动开发服务器和本地 Worker。
6. 在多个标签页或设备访问 http://localhost:5175,观察实时更新。
部署通过 turbo deploy 从 apps/worker 目录执行。
演示:https://wsdemo.cvyl.me
仓库:cvyl/cloudflare-websocket-livecount
评论
0 评分人数达到10人后显示
登录后参与讨论。