このプロジェクトについて

Turbo Monorepoのリアルタイム訪問者カウンターは、WebSocketsを使用したライブ訪問者追跡を実証するオープンソースプロジェクトです。このアプリケーションは、URLの「ルーム」ごとにユニークな訪問者数をカウントし、アクティブなすべてのルームの合計を集計します。 アーキテクチャ：このプロジェクトはTurborepoモノレポレイアウトに従っています。フロントエンドはclient/にVue 3 + Viteアプリケーションとして存在します。バックエンドはserver/に、永続的でリアルタイムな状態のためのDurable Objectsを基盤としたCloudflare Workerとして存在します。レイヤー間の通信はWebSocketsを介して行われます。 機能： - 現在のブラウザ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でwranglerを認証します。 4. client/およびserver/ディレクトリの両方でwrangler.tomlを設定します。 5. turbo devを実行して、開発サーバーとローカルワーカーの両方を起動します。 6. 複数のタブまたはデバイスでhttp://localhost:5175にアクセスし、リアルタイムの更新を確認します。 デプロイは、関連するapps/workerディレクトリからturbo deployを通じて処理されます。 デモ：https://wsdemo.cvyl.me リポジトリ：cvyl/cloudflare-websocket-livecount