multiplayer-websocket
Installation
SKILL.md
Multiplayer WebSocket (Tokyo Sounds)
This project uses a standalone WebSocket server plus a React hook for real-time multiplayer. The server runs separately (e.g. npx tsx multiplayer-server.ts on port 3001). The client connects via useMultiplayer, sends position/rotation updates (throttled), and receives a list of nearby players to render.
Architecture at a Glance
| Layer | Role |
|---|---|
| multiplayer-server.ts | Node.js ws server: join/update/leave, 500m visibility, 50ms broadcast, 10s stale cleanup |
| src/types/multiplayer.ts | Shared ClientMessage / ServerMessage and PlayerState types |
| src/hooks/useMultiplayer.ts | Connect on mount, send join/update/leave, handle welcome/players/playerLeft, throttle updates (50ms), silent reconnect every 5s |
| Pages / MultiplayerManager | Call useMultiplayer, pass nearbyPlayers to OtherPlayers, call sendUpdate from position/rotation callbacks or useFrame |