用途:该技能用于在 Tokyo Sounds 项目中管理基于 WebSocket 的实时多人功能,适用于修改多人同步、useMultiplayer hook、multiplayer-server 或消息协议等场景。
主要能力:项目采用独立 WebSocket 服务器加 React hook 的架构。multiplayer-server.ts 是 Node.js ws 服务器,负责 join/update/leave、500m 可见范围、50ms 广播、10s 过期清理;src/types/multiplayer.ts 定义共享的 ClientMessage/ServerMessage 与 PlayerState 类型;src/hooks/useMultiplayer.ts 在挂载时连接,发送 join/update/leave,处理 welcome/players/playerLeft,节流更新(50ms),每 5s 静默重连;页面或 MultiplayerManager 调用 useMultiplayer,将 nearbyPlayers 传给 OtherPlayers,并在位置/旋转回调或 useFrame 中调用 sendUpdate。
使用方式:服务器可单独运行,例如 npx tsx multiplayer-server.ts,端口 3001。客户端通过 useMultiplayer 连接,发送位置/旋转更新(已节流),并接收附近玩家列表用于渲染。修改 WebSocket URL(如环境变量 NEXT_PUBLIC_MULTIPLAYER_URL)、端口或 ws/wss 时使用本技能;新增或修改消息类型需同时扩展 src/types/multiplayer.ts 及服务器和 hook;调整节流/广播间隔涉及 CLIENT_UPDATE_INTERVAL_MS、BROADCAST_INTERVAL_MS、RECONNECT_INTERVAL_MS、STALE_PLAYER_TIMEOUT_MS;修复连接生命周期、重连或清理在 useMultiplayer;添加服务器端逻辑(可见半径、认证、房间)在 multiplayer-server.ts。
约定:hook 将 WebSocket 保存在 ref 中,卸载时清理重连定时器并关闭 socket;异步回调后使用 mountedRef.current 防止卸载后 setState;客户端节流仅在 Date.now() - lastUpdateTimeRef >= CLIENT_UPDATE_INTERVAL_MS(50ms)时发送;浏览器中根据页面协议使用 ws:// 或 wss://,HTTPS 页面须用 wss:// 以避免混合内容。
限制:资料未提供收费、价格、平台支持范围或效果保证等信息,暂未提供。