在线联机原型全集:第 5 章 你画我猜(Pictionary / 白板协作)
类别:多人协作 + 实时绘图原型 目标:验证二进制绘图流、快照 + 增量同步、内容审核、流量控制与 CRDT 协同一致性。 原型代号:
proto-005-pictionary依赖模块:proto-001-echo-chatroom,proto-004-trivia-buzzer推荐语言栈:Go + WebSocket + WebRTC(可选) 网络协议:WebSocket(二进制帧)
一、概述(Overview)
“你画我猜(Pictionary)”是一种极佳的多人实时互动验证原型。 它同时涉及:
- 双向实时流传输(画面增量广播);
- 多用户状态维护(谁在画、谁在猜、谁在旁观);
- 数据带宽管理(防止过量数据堵塞);
- 内容审核与过滤(图形、文字、敏感词检测);
- 协同一致性(不同客户端绘制状态保持一致);
- 回放与导出(保存绘图历史重放)。
在技术层面上,这个原型代表了「实时同步」体系的成熟阶段, 在游戏、教育、办公协作(如 Miro、Jamboard)、以及多人美术工具中均有广泛应用。
二、核心玩法与系统目标(Gameplay & Objectives)
2.1 游戏规则(简版)
- 房主或系统指定一名玩家为“画者”;
- 画者在白板上绘制提示内容(例如一个词语、物品、动物);
- 其他玩家实时观看画面流并输入猜测;
- 猜中者获得积分;
- 回合结束后换画者;
- 全部轮完后结算总分。
2.2 系统验证目标
| 模块 | 目标功能 | 核心验证点 |
|---|---|---|
| 绘图流系统 | 绘图轨迹实时同步 | 增量广播、二进制压缩 |
| 状态同步 | 房间成员状态管理 | 谁在画/谁在猜/观战者分层 |
| 内容审核 | 图片与文字检测 | 异步审核 + 动态禁词表 |
| 带宽控制 | 流量节流与差分同步 | 分片、限频、压缩算法 |
| 回放系统 | 绘制过程重放 | 时间戳重建与快照合成 |
| 协作一致性 | CRDT 模型 | 操作合并与冲突解决 |
| 审计与日志 | 行为存档 | 防止违规使用与重放 |
三、系统架构设计(Architecture)
graph TD
A[Client Drawer] -->|Binary Stream| B[Gateway]
A2[Client Guessers] -->|Realtime View| B
B --> C[RoomService]
C --> D[WhiteboardEngine]
D --> E[CRDT Merge Layer]
D --> F[AuditService]
F --> G[AI Filter / OCR]
D --> H[ReplayLogger]
模块说明
| 模块 | 职责 |
|---|---|
| Gateway | WebSocket 接入、流量控制、身份鉴权 |
| RoomService | 管理房间、回合状态、画者切换 |
| WhiteboardEngine | 绘图流解析、增量广播、快照管理 |
| CRDT Merge Layer | 协作一致性处理(合并、冲突解决) |
| AuditService | 内容审核(OCR、图像识别) |
| ReplayLogger | 绘制事件日志与导出 |
| AI Filter | 图片与文本识别、敏感内容检测 |
四、功能模块详解(Functional Modules)
4.1 WhiteboardEngine(绘图引擎)
功能描述
- 接收来自“画者”的二进制笔迹数据;
- 按时间戳存储绘制命令;
- 增量广播到所有观众;
- 支持快照(snapshot)保存。
数据结构
type DrawCommand struct {
ID int64
X, Y float32
Color string
Thickness int
Op string // begin, draw, end
Timestamp int64
}
压缩机制
- 将多条
DrawCommand打包成单帧; - 使用 MessagePack / Protobuf 编码;
- 帧大小上限:32 KB;
- 以 30 FPS 频率发送(约 33ms 一帧)。
4.2 CRDT Merge Layer(协同一致性)
背景
多用户同时在同一白板绘制时可能产生冲突: 例如两个用户在同一像素绘制不同颜色。
解决方案:
采用 CRDT(Conflict-Free Replicated Data Type) 模型, 基于操作日志合并策略:
[ merge(op_a, op_b) = \text{max_timestamp}(op_a, op_b) ]
每个绘制命令附带唯一 op_id 与 timestamp,
服务器根据时间戳与优先级合并状态,保持最终一致。
4.3 AuditService(内容审核)
审核内容
- 图像识别(OCR + 图像分类);
- 敏感词检测;
- 猜测消息过滤。
审核机制
- 绘制帧异步上报至审核队列;
- 审核结果异步回写;
- 审核延迟 < 1s;
- 敏感图像立即模糊处理。
graph LR
A[WhiteboardEngine] --> B[AuditQueue]
B --> C[AI Filter]
C --> D[AuditResult]
D --> A
4.4 ReplayLogger(回放系统)
事件日志模型
{
"room_id": "wb-001",
"commands": [
{"op":"begin","x":10,"y":20,"t":1730690100},
{"op":"draw","x":15,"y":25,"t":1730690101},
{"op":"end","x":18,"y":27,"t":1730690102}
],
"guesses": [
{"uid":"A","text":"apple","time":1730690103}
]
}
重放机制
- 每条命令带时间戳;
- 回放系统按时间顺序播放;
- 支持倍速播放与暂停;
- 可导出 MP4 / GIF。
4.5 GuessingSystem(猜词模块)
- 接收猜测消息;
- 实时广播;
- 正确匹配触发结算;
- 支持提示词渐显(hint system);
- 反作弊:服务端仅匹配词根(例如 “apple” == “Apples”)。
4.6 带宽与节流控制(Bandwidth Control)
| 策略 | 描述 |
|---|---|
| 限频发送 | 每帧最小间隔 33ms |
| 分片传输 | 大文件拆分为多帧 |
| 差分同步 | 仅广播新笔迹区域 |
| 压缩算法 | Snappy / zstd |
| 流量上限 | 每用户上限 256KB/s |
五、状态机(State Machine)
stateDiagram-v2
[*] --> Waiting
Waiting --> Drawing: 选定画者
Drawing --> Guessing: 广播题目
Guessing --> Judging: 有人答对或超时
Judging --> Result: 显示结果
Result --> Drawing: 下一轮
六、流程图(Sequence Diagram)
sequenceDiagram
ClientDrawer->>Gateway: start_draw()
Gateway->>WhiteboardEngine: send(binary frame)
WhiteboardEngine->>CRDT: merge(op)
WhiteboardEngine->>Clients: broadcast(delta)
ClientGuesser->>Gateway: send_guess("apple")
Gateway->>Judge: check_answer()
Judge->>Clients: announce_winner()
WhiteboardEngine->>ReplayLogger: persist_frame()
七、数据模型(Data Schema)
| 表 | 字段 | 描述 |
|---|---|---|
draw_logs |
id, room_id, op_json, timestamp | 绘制日志 |
guesses |
id, user_id, text, correct, time | 猜测日志 |
audits |
id, frame_id, result, ai_score | 审核结果 |
replays |
id, room_id, data_blob | 回放文件 |
users |
id, nickname, score | 玩家表 |
八、验证指标(Metrics & KPI)
| 指标 | 目标 | 说明 |
|---|---|---|
| 帧丢失率 | ≤0.5% | 网络可靠性 |
| 带宽占用 | ≤256KB/s | 节流控制 |
| 审核延迟 | ≤1000ms | 实时安全 |
| CRDT 合并一致率 | 100% | 状态同步 |
| 回放可重现度 | 100% | 时间序列重建 |
| 猜中正确率 | ≥90% | 答案匹配精度 |
九、扩展功能(Extensions)
-
AI 自动绘制提示
- 服务器使用生成模型(例如 Stable Diffusion)自动画提示图。
-
白板回放导出工具
- 将事件流转换为 MP4 动画;
- 支持倍速与时间跳转。
-
多人协作模式
- 支持同时多画者;
- CRDT 确保合并一致。
-
延迟补偿算法
- 客户端缓存前几帧绘制;
- 延迟抵消后再渲染(时间插值)。
-
语音输入 + 自动生成绘图
- 语音识别转文字;
- GPT 自动生成对应图形。
十、技术选型与实现建议(Tech Stack)
| 模块 | 技术 | 理由 |
|---|---|---|
| 网络层 | WebSocket + Binary Frame | 低延迟、高带宽 |
| 序列化 | Protobuf / MessagePack | 高压缩率 |
| 协作同步 | CRDT (Y.js / Automerge) | 无锁合并 |
| 审核模块 | TensorFlow / PaddleOCR | 图像识别 |
| 存储 | Redis Stream + MinIO | 实时与归档分层 |
| 前端 | Canvas / WebGL | 流畅绘制 |
| 回放 | FFmpeg 合成器 | 输出视频 |
十一、压测与运维(Load & Ops)
| 测试场景 | 模拟行为 | 目标 |
|---|---|---|
| 大规模绘制 | 1000 用户协作绘图 | 无冲突 |
| 带宽瓶颈 | 200KB/s 限速环境 | 仍能绘制流畅 |
| 审核压力 | 1000 帧/秒 审核 | AI 模型无阻塞 |
| 回放验证 | 10 万条事件重放 | 时间序一致 |
| CRDT 合并 | 同步节点 3 个 | 一致性验证成功 |
监控指标:
draw_frames_totalaudit_delay_msbandwidth_usage_bytescrdt_merge_totalreplay_export_total
十二、设计反思与演化(Reflection & Evolution)
12.1 设计哲学
“你画我猜”首次让系统进入了实时协作维度。 从此之后,世界不再只是“状态”,而是“连续变化的过程”。 这意味着:
- 你不再仅验证结果;
- 你要保证过程的一致性;
- 你要对每一帧都能回放、可审计、可验证。
12.2 关键难点
- 流量与延迟平衡;
- 审核延迟与实时性的冲突;
- CRDT 实现复杂度;
- 前端插值渲染稳定性。
12.3 下一阶段演化
| 能力 | 对应原型 |
|---|---|
| 60FPS 实时同步 | → #6 Pong 对战 |
| 多人流式同步 | → #7 贪吃蛇大作战 |
| 协作编辑 + 冲突解决 | → #9 协作扫雷 |
| 结构化同步 + 存档 | → #10 城格建造 mini-SLG |
十三、总结
“你画我猜”代表了「实时协作系统」的第一个完整形态。 它让我们进入了一个新领域:
从离散事件到连续流、从状态一致到过程一致、从通信到协作。
这不仅是一个小游戏,更是一种架构思想的实验: CRDT + 流式同步 + 审核 + 回放 构成了所有协作类应用(白板、文档、地图编辑器、多人建造游戏)的通用骨架。
如果聊天室是“连接的起点”, 那么白板协作就是“内容的起点”。