WebSocket实时协作需服务端维护问卷状态、前端规范消息协议、服务端计算并推送汇总结果。服务端用Map存问卷ID对应的状态对象，前端通过URL传参连接，收发JSON格式消息，服务端更新统计后广播轻量级summary，前后端协同处理断线重连与幂等校验。
WebSocket 是 HTML5 提供的全双工通信协议，特别适合网页端实时协作场景，比如多人同时填写问卷、后台即时汇总统计。关键不在于“怎么连”，而在于“谁发什么、谁存哪、谁推给谁”。下面分三块讲清楚：服务端设计要点、前端连接与消息结构、数据汇总逻辑实现。
服务端需维护问卷状态与客户端映射
用 Node.js（如 ws 或 Socket.IO）搭建 WebSocket 服务时，不能只做消息中转。必须为每份问卷维护一个独立的状态对象，包含当前所有已提交的答案、参与用户列表、题目维度统计（如单选题各选项计数）。
- 每个问卷用唯一 ID（如
survey_abc123）作为房间标识，客户端连接时带上该 ID 加入对应房间 - 服务端用 Map 存储：
surveys.set('survey_abc123', { answers: [], counts: { q1: { A: 5, B: 3 }, q2: [...] } }) - 新答案到达时，解析结构（如
{qid: 'q1', value: 'A', userId: 'u789'}），更新对应问卷的 counts 和 answers，再广播给该问卷所有在线客户端
前端建立连接并规范收发格式
网页端用原生 WebSocket API 即可，无需额外库。重点是统一消息协议，避免前后端解析错乱。
- 连接时传参：通过 URL 携带问卷 ID，
new WebSocket('wss://example.com/ws?surveyId=survey_abc123') - 发送答案用 JSON 字符串，含必要字段：
{"type":"answer","data":{"qid":"q1","value":"B","ts":1715678901234}} - 接收消息统一处理：监听
onmessage，根据msg.data.type分发——"update"类型触发图表重绘，"joined"显示当前人数
汇总逻辑放在服务端，前端只负责渲染
实时汇总不是靠前端轮询或自己加总，而是服务端计算后推送结果。这样既保证一致性，又降低前端负担。
立即学习“前端免费学习笔记（深入）”；
- 服务端收到新答案后，立即更新该问卷的维度统计（如多选题用 Set 去重计数，量表题累加均值）
- 每次更新完，构造轻量级汇总包：
{"type":"summary","data":{"total":42,"q1":{"A":21,"B":15,"C":6},"q2_avg":3.8}} - 前端收到后，用 Chart.js 或原生 Canvas 更新对应图表，不用重新请求全量数据
- 若需历史回溯，服务端可额外提供 REST 接口（如
GET /api/survey/survey_abc123/history），与 WebSocket 解耦
不复杂但容易忽略：连接断开重连时，前端应缓存未发出的答案（localStorage），恢复连接后补发；服务端要校验重复提交（用 userId + qid 做幂等判断）。做到这两点，实时汇总就稳了。
