multiplayer-websocket
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 |
When to Use This Skill
- Changing WebSocket URL (e.g. env
NEXT_PUBLIC_MULTIPLAYER_URL), port, or ws/wss. - Adding or changing message types (extend
ClientMessage/ServerMessageinsrc/types/multiplayer.tsand both server and hook). - Adjusting throttle/broadcast intervals (
CLIENT_UPDATE_INTERVAL_MS,BROADCAST_INTERVAL_MS,RECONNECT_INTERVAL_MS,STALE_PLAYER_TIMEOUT_MS). - Fixing connection lifecycle, reconnection, or cleanup in
useMultiplayer.
More from liuchiawei/agent-skills
next-intl-app-router
Configures and uses next-intl for Next.js App Router with locale-based routing. Use when adding or changing i18n, locale routing, translations, next-intl plugin, middleware/proxy, or message files in Next.js App Router projects.
199mediapipe-usage
Provides guidance for Google MediaPipe Pose Landmarker on web using @mediapipe/tasks-vision. Covers setup, landmark indices, running modes, and real-time video patterns. Use when working with MediaPipe, pose detection, body landmarks, or @mediapipe/tasks-vision.
23frontend-developer
Build React components, implement responsive layouts, and handle
17web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
14frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
14ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
13