프로젝트 소개

Real-time Visitor Counter in Turbo Monorepo는 WebSocket을 활용한 실시간 방문자 추적을 보여주는 오픈소스 프로젝트입니다. 이 애플리케이션은 현재 브라우저 URL에 따라 각 '방'의 고유 방문자를 세고, 모든 활성 방의 총합을 집계합니다. 아키텍처: Turborepo 모노리포 구조를 따릅니다. 프론트엔드는 client/ 디렉토리에 Vue 3 + Vite 앱으로 구성되며, 백엔드는 server/ 디렉토리에 Cloudflare Worker와 Durable Objects를 사용하여 지속적이고 실시간 상태를 관리합니다. 계층 간 통신은 WebSocket을 통해 이루어집니다. 기능: - 현재 브라우저 URL 기반 방별 방문자 수 카운팅 - 동시에 활성화된 모든 방의 전역 방문자 수 합산 - 개발 환경(ws://localhost:8787)과 운영 환경(wss://) 자동 전환 - 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 실행으로 개발 서버 및 로컬 워커 시작. 6. 여러 탭 또는 장치에서 http://localhost:5175 접속하여 실시간 업데이트 확인. 배포는 apps/worker 디렉토리에서 turbo deploy 명령어로 처리됩니다. 데모: https://wsdemo.cvyl.me 저장소: cvyl/cloudflare-websocket-livecount