websocket不直接传canvas帧，而是高效传输压缩/差分后的帧数据并由客户端快速渲染。服务端用toblob+arraybuffer、差分编码、zlib压缩；客户端用imagebitmap+requestanimationframe解耦解码与绘制；配合缓冲、降级和时间戳保障实时性。
WebSocket 本身不直接传输 Canvas 帧，而是传输帧的“数据表示”（如 base64 图片、压缩后的二进制像素、或差分编码），配合客户端实时绘制，才能实现低延迟动画直播效果。关键不在“传 Canvas”，而在“高效传帧+快速渲染”。
1. 服务端：生成并压缩帧数据，避免直接 send(canvas.toDataURL())
Canvas 的 toDataURL('image/png') 生成 Base64 字符串，体积大、编码慢、CPU 高，不适合逐帧直播。推荐方案：
-
用
canvas.toBlob()+ArrayBuffer传输二进制：更小、更快，支持流式读取； - 对连续帧做差分编码（如只传变化区域）：大幅降低带宽（需自定义协议，例如记录 dirtyRect + getImageData）；
-
启用服务端压缩（如 zlib）：WebSocket 不内置压缩，但可通过
permessage-deflate扩展启用（需前后端同时支持）； - 控制帧率与分辨率：例如限制为 20fps、800×600，避免压垮网络和解码端。
2. 客户端：WebSocket 接收 + requestAnimationFrame 渲染，避免阻塞
不要在 onmessage 中直接 drawImage —— 解码和绘制若耗时，会导致丢帧。正确做法：
-
接收后立即转为
ImageBitmap（异步解码）：createImageBitmap(blob).then(bitmap => queueFrame(bitmap))； -
用
requestAnimationFrame统一驱动绘制：维护一个帧队列，每帧仅 draw 当前最新生效帧； - 跳过中间帧防堆积：若队列积压 > 2 帧，清空旧帧，只保留最新一个；
-
使用离屏 canvas 或
transferControlToOffscreen()（配合 Worker）可进一步解耦解码与渲染线程。
3. 实时性优化：心跳、缓冲策略与降级机制
纯 WebSocket 无重传、无拥塞控制，需主动保障流畅性：
- 服务端按固定间隔推帧（如 50ms），不依赖 client ACK，避免反馈延迟；
- 客户端维护滑动窗口缓冲（2~3 帧）：平衡延迟与卡顿，缓冲不足则降帧率；
- 检测 WebSocket 断连或高延迟时自动降级：例如切到 MSE（Media Source Extensions）加载 WebRTC-like 分片视频流；
-
添加时间戳字段（如
{ts: Date.now(), data: …}），客户端用于计算播放进度与同步音频（如有）。
4. 完整流程示意（精简版）
服务端（Node.js + ws）：
const WebSocket = require('ws');<br>const wss = new WebSocket.Server({ port: 8080 });<br>wss.on('connection', ws => {<br> const interval = setInterval(() => {<br> ctx.clearRect(0, 0, width, height);<br> drawAnimatedContent(ctx); // 自定义动画逻辑<br> canvas.toBlob(blob => {<br> const reader = new FileReader();<br> reader.onload = () => ws.send(reader.result, { binary: true });<br> reader.readAsArrayBuffer(blob);<br> }, 'image/webp', 0.8); // 用 WebP 提升压缩率<br> }, 50); // ≈20fps<br>});
客户端（浏览器）：
const ws = new WebSocket('ws://localhost:8080');<br>let frameQueue = [];<br>ws.onmessage = async e => {<br> if (e.data instanceof ArrayBuffer) {<br> const bitmap = await createImageBitmap(e.data);<br> frameQueue.push(bitmap);<br> if (frameQueue.length > 3) frameQueue.shift();<br> }<br>};<br>function render() {<br> if (frameQueue.length) {<br> ctx.drawImage(frameQueue[0], 0, 0);<br> frameQueue.shift();<br> }<br> requestAnimationFrame(render);<br>}<br>render();
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
