Real-time Visitor Counter in Turbo Monorepo

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.

Demo

https://wsdemo.cvyl.me

Project Overview

This 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.

• Frontend: Vue 3 + Vite
• Backend: Cloudflare Workers + Durable Objects
• Monorepo Tool: Turborepo

Features

• Real-time visitor counting per room (each unique URL is treated as a room).
• Total visitor count across all active rooms.
• WebSocket-based communication between Vue front-end and Cloudflare Worker.
• Dynamic switching between local (development) and production WebSocket servers.
• Turbo Monorepo structure for efficient builds and management.

Prerequisites

• Node.js and pnpm installed.

• Cloudflare Account with Workers enabled.

• Turborepo installed globally:

  pnpm install turbo -g
  

Project Structure

.
| 
├── client/                # Vue 3 app with Vite
├── server/                # Cloudflare Worker with Durable Objects
├── turbo.json             # Turbo configuration file
├── package.json           # Root package.json for managing dependencies
└── README.md              # This README file

Installation

1. Clone the Repository

2. Install Dependencies

Install dependencies for the entire monorepo:

pnpm install

3. Install Turbo CLI & Wrangler (If you haven't already)

pnpm install turbo -g
pnpm install wrangler -g

4. Configure Cloudflare Worker

wrangler login

And edit the wrangler.toml file in both server/ and client/.

Running Locally

turbo dev

This will start the Cloudflare Worker on http://localhost:8787.

3. WebSocket Behaviour

The application is designed to switch between WebSocket URLs depending on the environment:

• Development: Uses ws://localhost:8787 for WebSockets.
• Production: Uses wss://your-worker-url.workers.dev for WebSockets (edit in client).

Deployment

Deploy the Repository

Navigate to the apps/worker directory:

turbo deploy

Environment Variables

Cloudflare Worker (wrangler.toml)

[vars]
nameId = "your-domain.com"

This variable is used by the worker to dynamically assign a counterId.

Testing

1. Open the Vue frontend at http://localhost:5175.
2. Open multiple browser tabs or devices to see real-time visitor counts update dynamically.
3. Ensure rooms are created dynamically based on the URL (e.g., /about, /contact).

Troubleshooting

• If you experience issues with WebSocket connections, ensure that:
  • The WebSocket URL is correctly pointing to either localhost:8787 (for dev) or your Cloudflare Worker URL (for production).
  • Your Cloudflare Worker is deployed and accessible.

Contributing

Feel free to fork this repository and submit pull requests if you'd like to contribute!