Skip to content

Latest commit

 

History

History
124 lines (81 loc) · 3.34 KB

README.md

File metadata and controls

124 lines (81 loc) · 3.34 KB
Raw

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!