{"id":17793388,"url":"https://github.com/cvyl/cloudflare-websocket-livecount","last_synced_at":"2025-03-16T19:30:29.837Z","repository":{"id":257909354,"uuid":"872977245","full_name":"cvyl/cloudflare-websocket-livecount","owner":"cvyl","description":"This project is a real-time visitor counter built using Vue 3, Vite, Cloudflare Durable Objects, and WebSockets, all organized within a Turbo Monorepo. The app tracks visitors in real-time across different \"rooms\" (URLs) and displays total visitors across all active rooms.","archived":false,"fork":false,"pushed_at":"2025-02-05T22:21:12.000Z","size":308,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-09T22:42:53.957Z","etag":null,"topics":["cloudflare","cloudflare-durable-objects","cloudflare-pages","cloudflare-worker","cloudflare-workers","serverless","turborepo"],"latest_commit_sha":null,"homepage":"https://wsdemo.cvyl.me","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cvyl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"cvyl"}},"created_at":"2024-10-15T11:59:24.000Z","updated_at":"2025-02-05T22:21:09.000Z","dependencies_parsed_at":"2024-10-18T01:19:38.534Z","dependency_job_id":null,"html_url":"https://github.com/cvyl/cloudflare-websocket-livecount","commit_stats":null,"previous_names":["cvyl/cloudflare-websocket-livecount"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cvyl%2Fcloudflare-websocket-livecount","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cvyl%2Fcloudflare-websocket-livecount/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cvyl%2Fcloudflare-websocket-livecount/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cvyl%2Fcloudflare-websocket-livecount/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cvyl","download_url":"https://codeload.github.com/cvyl/cloudflare-websocket-livecount/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826780,"owners_count":20354220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cloudflare","cloudflare-durable-objects","cloudflare-pages","cloudflare-worker","cloudflare-workers","serverless","turborepo"],"created_at":"2024-10-27T11:08:19.471Z","updated_at":"2025-03-16T19:30:29.523Z","avatar_url":"https://github.com/cvyl.png","language":"TypeScript","funding_links":["https://github.com/sponsors/cvyl"],"categories":[],"sub_categories":[],"readme":"# Real-time Visitor Counter in Turbo Monorepo\n\nThis project is a **real-time visitor counter** built using **Vue 3**, **Vite**, **Cloudflare Durable Objects**, and WebSockets, all organized within a **Turbo Monorepo**. The app tracks visitors in real-time across different \"rooms\" (URLs) and displays total visitors across all active rooms.\n\n## Demo\n\n\u003chttps://wsdemo.cvyl.me\u003e\n\n## Project Overview\n\nThis project is organized as a monorepo using **Turborepo** for managing both the front-end (Vue app) and back-end (Cloudflare Worker) within a single repository. The Vue application interacts with a Cloudflare Worker, which uses Durable Objects to track active rooms and visitors in real-time.\n\n- **Frontend**: Vue 3 + Vite\n- **Backend**: Cloudflare Workers + Durable Objects\n- **Monorepo Tool**: Turborepo\n\n## Features\n\n- Real-time visitor counting per room (each unique URL is treated as a room).\n- Total visitor count across all active rooms.\n- WebSocket-based communication between Vue front-end and Cloudflare Worker.\n- Dynamic switching between local (development) and production WebSocket servers.\n- Turbo Monorepo structure for efficient builds and management.\n\n## Prerequisites\n\n- **Node.js** and **pnpm** installed.\n- **Cloudflare Account** with Workers enabled.\n- **Turborepo** installed globally:\n\n  ```bash\n  pnpm install turbo -g\n  ```\n\n## Project Structure\n\n```sh\n.\n| \n├── client/                # Vue 3 app with Vite\n├── server/                # Cloudflare Worker with Durable Objects\n├── turbo.json             # Turbo configuration file\n├── package.json           # Root package.json for managing dependencies\n└── README.md              # This README file\n```\n\n## Installation\n\n### 1. Clone the Repository\n\n### 2. Install Dependencies\n\nInstall dependencies for the entire monorepo:\n\n```bash\npnpm install\n```\n\n### 3. Install Turbo CLI \u0026 Wrangler (If you haven't already)\n\n```bash\npnpm install turbo -g\npnpm install wrangler -g\n```\n\n### 4. Configure Cloudflare Worker\n\n```bash\nwrangler login\n```\n\nAnd edit the `wrangler.toml` file in both `server/` and `client/`.\n\n## Running Locally\n\n```bash\nturbo dev\n```\n\nThis will start the Cloudflare Worker on `http://localhost:8787`.\n\n### 3. WebSocket Behaviour\n\nThe application is designed to switch between WebSocket URLs depending on the environment:\n\n- **Development**: Uses `ws://localhost:8787` for WebSockets.\n- **Production**: Uses `wss://your-worker-url.workers.dev` for WebSockets (edit in client).\n\n## Deployment\n\n### Deploy the Repository\n\nNavigate to the `apps/worker` directory:\n\n```bash\nturbo deploy\n```\n\n## Environment Variables\n\n### Cloudflare Worker (`wrangler.toml`)\n\n```toml\n[vars]\nnameId = \"your-domain.com\"\n```\n\nThis variable is used by the worker to dynamically assign a `counterId`.\n\n## Testing\n\n1. Open the Vue frontend at `http://localhost:5175`.\n2. Open multiple browser tabs or devices to see real-time visitor counts update dynamically.\n3. Ensure rooms are created dynamically based on the URL (e.g., `/about`, `/contact`).\n\n## Troubleshooting\n\n- If you experience issues with WebSocket connections, ensure that:\n  - The WebSocket URL is correctly pointing to either `localhost:8787` (for dev) or your Cloudflare Worker URL (for production).\n  - Your Cloudflare Worker is deployed and accessible.\n\n## Contributing\n\nFeel free to fork this repository and submit pull requests if you'd like to contribute!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcvyl%2Fcloudflare-websocket-livecount","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcvyl%2Fcloudflare-websocket-livecount","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcvyl%2Fcloudflare-websocket-livecount/lists"}