playground/Web/WebSocket/websocket

WebSocket Chat Monorepo

A real-time WebSocket chat application built with TypeScript, Express, and Vite.

Project Structure

├── apps/
│   ├── server/          # Express WebSocket server
│   └── frontend/        # React/Vite frontend
├── packages/
│   └── shared-types/    # Shared TypeScript types
└── package.json         # Root workspace configuration

Quick Start

# Install all dependencies
npm install

# Start both server and frontend in development mode
npm start

# Or run individually:
npm run dev:server    # Start server only
npm run dev:frontend  # Start frontend only

Available Scripts

• npm start - Build shared types and start both server and frontend
• npm run dev:all - Start both server and frontend concurrently
• npm run dev:server - Start server only
• npm run dev:frontend - Start frontend only
• npm run build - Build all packages
• npm run typecheck - Type check all packages
• npm run lint - Lint all packages
• npm run clean - Clean all build outputs

Development

The monorepo uses npm workspaces for dependency management and TypeScript project references for type checking across packages.

Server

• Runs on http://localhost:3000
• WebSocket endpoint: ws://localhost:3000/ws
• Health check: http://localhost:3000/ping

Frontend

• Runs on http://localhost:5173 (Vite default)
• Connects to WebSocket server for real-time messaging

Features

• Real-time WebSocket communication
• Ping/pong latency measurement
• Shared TypeScript types across packages
• Hot reload for development
• Monorepo workspace management