Add web client with WebSocket support
Implemented browser-based web client alongside existing pygame desktop client with dual-protocol server architecture supporting both TCP and WebSocket. Backend Changes: - Refactored GameServer for dual-protocol support (TCP + WebSocket) - Added WebSocketHandler for handling WebSocket connections - Added HTTPServer using aiohttp for serving web client files - Updated protocol handling to work with both connection types - Server tracks clients with protocol metadata (TCP/WebSocket) - Protocol-agnostic message sending and broadcasting - Added WebSocket port (8889) and HTTP port (8000) configuration Web Client: - Complete HTML5/CSS/JavaScript implementation - Responsive dark-themed UI - HTML5 Canvas rendering matching pygame visual style - WebSocket connection with auto-detected server URL - Real-time multiplayer gameplay in browser - Player list with scores and status - Mobile-friendly responsive design Deployment Options: - Development: Built-in HTTP server for local testing - Production: Disable HTTP server, use nginx/Apache for static files - Flexible server configuration (--no-http, --no-websocket flags) - Comprehensive nginx/Apache deployment documentation New Files: - src/server/websocket_handler.py - WebSocket connection handler - src/server/http_server.py - Static file server - web/index.html - Web client interface - web/style.css - Responsive styling - web/protocol.js - Protocol implementation - web/game.js - Game client with Canvas rendering - web/README.md - Deployment documentation Updated Files: - requirements.txt - Added websockets and aiohttp dependencies - src/server/game_server.py - Dual-protocol support - src/shared/constants.py - WebSocket and HTTP port constants - run_server.py - Server options for web support - README.md - Web client documentation - CLAUDE.md - Architecture documentation Features: - Web and desktop clients can play together simultaneously - Same JSON protocol for both client types - Independent server components (disable what you don't need) - Production-ready with reverse proxy support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
69
README.md
69
README.md
@@ -5,7 +5,10 @@ A network multiplayer Snake game built with Python, asyncio, and pygame.
|
||||
## Features
|
||||
|
||||
- Real-time multiplayer gameplay with client-server architecture
|
||||
- **Web client** - Play in your browser without installing anything!
|
||||
- **Desktop client** - Native pygame client for local play
|
||||
- **Automatic server discovery** using multicast (zero-configuration LAN play)
|
||||
- **Dual-protocol support** - TCP for desktop, WebSocket for web
|
||||
- Support for multiple players simultaneously
|
||||
- Classic Snake gameplay with collision detection
|
||||
- Color-coded snakes for each player
|
||||
@@ -27,40 +30,86 @@ pip install -r requirements-dev.txt
|
||||
|
||||
## Running the Game
|
||||
|
||||
### Quick Start (Auto-Discovery)
|
||||
### Web Client (Easiest!)
|
||||
|
||||
1. **Start the server** (in one terminal):
|
||||
1. **Start the server**:
|
||||
```bash
|
||||
python run_server.py --name "My Game"
|
||||
```
|
||||
|
||||
2. **Open your browser** and navigate to:
|
||||
```
|
||||
http://localhost:8000
|
||||
```
|
||||
|
||||
3. **Enter your name** and click Connect. The WebSocket URL is auto-detected!
|
||||
|
||||
4. **Play!** Multiple players can join from different browsers/devices.
|
||||
|
||||
### Desktop Client (Pygame)
|
||||
|
||||
1. **Start the server** (if not already running):
|
||||
```bash
|
||||
python run_server.py
|
||||
# Optional: python run_server.py --name "My Server" --port 8888
|
||||
```
|
||||
|
||||
2. **Start one or more clients** (in separate terminals):
|
||||
2. **Start pygame clients** (in separate terminals):
|
||||
```bash
|
||||
python run_client.py --name Alice
|
||||
# Clients will automatically discover servers on the local network
|
||||
# Auto-discovers the server on your network
|
||||
```
|
||||
|
||||
### Mixed Play
|
||||
|
||||
Web and desktop clients can play together! The server supports both protocols simultaneously:
|
||||
- Desktop clients connect via TCP (port 8888)
|
||||
- Web clients connect via WebSocket (port 8889)
|
||||
|
||||
### Manual Connection
|
||||
|
||||
```bash
|
||||
# Server
|
||||
python run_server.py --host 0.0.0.0 --port 8888 --name "Game Room"
|
||||
# Server with all options
|
||||
python run_server.py --host 0.0.0.0 --port 8888 --ws-port 8889 --name "Game Room"
|
||||
|
||||
# Client (specify host directly)
|
||||
# Desktop client (direct connection)
|
||||
python run_client.py 192.168.1.100 --port 8888 --name Bob
|
||||
|
||||
# Web client: enter ws://192.168.1.100:8889 in the browser
|
||||
```
|
||||
|
||||
### Server Options
|
||||
|
||||
```bash
|
||||
python run_server.py --help
|
||||
|
||||
# Network
|
||||
# --host HOST Host address to bind to (default: localhost)
|
||||
# --port PORT Port number (default: 8888)
|
||||
# --port PORT TCP port for desktop clients (default: 8888)
|
||||
# --ws-port PORT WebSocket port for web clients (default: 8889, 0 to disable)
|
||||
# --http-port PORT HTTP server port (default: 8000, 0 to disable)
|
||||
# --name NAME Server name for discovery (default: Snake Server)
|
||||
# --no-discovery Disable multicast beacon
|
||||
|
||||
# Features
|
||||
# --no-discovery Disable multicast discovery beacon
|
||||
# --no-websocket Disable WebSocket server (desktop only)
|
||||
# --no-http Disable HTTP server (use external web server like nginx)
|
||||
# --web-dir PATH Path to web files (default: web)
|
||||
```
|
||||
|
||||
### Production Deployment
|
||||
|
||||
For production with nginx or Apache:
|
||||
|
||||
```bash
|
||||
# Run server without built-in HTTP server
|
||||
python run_server.py --no-http --host 0.0.0.0
|
||||
|
||||
# nginx serves static files from web/ directory
|
||||
# and proxies WebSocket connections to port 8889
|
||||
```
|
||||
|
||||
See `web/README.md` for detailed nginx/Apache configuration.
|
||||
|
||||
### Client Options
|
||||
|
||||
```bash
|
||||
|
||||
Reference in New Issue
Block a user