WebSocket是网页狼人杀实时交互核心，通过全双工长连接实现毫秒级状态同步；其包含连接绑定角色、状态机驱动流程、原子性操作保障、断线重连机制四部分。
WebSocket 是实现网页版狼人杀实时交互的核心技术，它能建立浏览器与服务器之间的全双工长连接，让法官、玩家状态、发言、投票、天亮/天黑等关键流程毫秒级同步，避免轮询带来的延迟和资源浪费。
一、WebSocket 连接建立与角色绑定
玩家进入房间时，前端通过 new WebSocket(url) 连接服务端（如 wss://game.example.com/room/123），URL 中携带房间号和临时 token。连接成功后立即发送初始化消息：
- 包含用户 ID、昵称、设备指纹（防多开）
- 服务端校验权限后，将其加入对应房间的 socket 映射表，并分配角色（如“预言家”“平民”“狼人”），但仅向该玩家广播其身份（其他玩家收到的是匿名占位符）
- 法官客户端需额外标记
isJudge: true，获得全流程控制权
二、游戏阶段状态机与指令驱动
狼人杀本质是严格的状态流转：夜晚行动 → 天亮公布 → 发言讨论 → 投票放逐 → 判定胜负。服务端用有限状态机（FSM）管理当前 phase（如 "night-werewolf", "day-discuss"），所有操作必须符合状态迁移规则：
- 法官调用
{type:"phase-start", phase:"night-seer"}，服务端校验当前是否为夜晚且未开始查杀，然后广播给所有玩家该阶段开启及倒计时 - 玩家提交动作（如预言家查验 A）时，前端只发
{type:"action", action:"check", target:"A"}，服务端验证身份权限、目标有效性、是否超时，再决定是否接受并广播脱敏结果（如“预言家查验 A，为好人”） - 任意阶段超时自动推进，服务端主动推送
{type:"phase-end", next:"day-discuss"}
三、敏感操作的原子性与一致性保障
投票、遗言、技能使用等操作必须防重放、防篡改、防并发冲突：
- 每个请求带唯一
seq序列号和timestamp，服务端缓存最近 30 秒内该用户的 seq，重复则拒绝 - 投票采用“先锁再投”：服务端收到
{type:"vote", target:"B"}后，先检查当前是否在投票阶段、该玩家是否未投过、目标是否存活，全部通过才写入内存投票池，并广播{type:"vote-recorded", player:"P1"}给本人（不暴露目标） - 夜间行动使用 Redis 的
SETNX指令加锁房间 key，确保同一时刻只有一个狼人能提交刀人，失败则返回“已被他人操作”
四、断线重连与状态快照同步
移动端易断网，不能简单断开就踢出。需支持安全重连：
- 前端监听
onclose，3 秒内尝试 reconnect，并携带上次连接的sessionId和最后收到的lastMsgId - 服务端查该 session 是否仍在有效期内（如 90 秒），若在，从消息队列中回溯推送断连期间的
phase变更、公共播报、自己被投票等关键事件 - 法官可手动触发
{type:"sync-state"}，服务端生成精简快照（含当前 phase、存活列表、已公开身份、投票结果摘要），一次性推送给所有在线客户端，用于界面强一致恢复
不复杂但容易忽略：所有广播消息必须做数据裁剪——法官看到完整日志，玩家只能看到与其视角匹配的内容（如狼人看不到预言家查验过程，只看到“天亮了”）；服务端逻辑永远可信，前端只负责渲染和输入校验，绝不自行判断胜负或跳转阶段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
