WebSocket弹幕系统需服务端准入控制、消息清洗、客户端密度压制三者协同；服务端须校验字段、截断超长文本、限制发送频率；前端用transform+requestAnimationFrame控制渲染密度；Nginx需正确配置WebSocket透传；服务端注入精准时间戳，客户端滑动窗口去重。
直接说结论：WebSocket 弹幕系统不是“连上就能用”，高并发下不加过滤会直接压垮前端渲染和后端广播逻辑；所谓“过滤”，核心是三件事——服务端准入控制、消息内容清洗、客户端密度压制，缺一不可。
服务端弹幕准入必须做字段校验和长度截断
很多开发者以为只要 ws.send() 发出去就完事了，结果上线后发现内存暴涨、连接频繁断开。根本原因是没在服务端第一道关卡做硬性约束。
-
text字段必须限制长度（建议 ≤ 80 字符），超长则截断或拒绝，防止恶意构造超大 payload 触发 OOM -
userId必须非空且格式合法（如 /^[a-zA-Z0-9_]{6,32}$/），避免伪造 ID 污染用户行为统计 -
color和size必须白名单校验（如 color ∈ ["#fff", "#f00", "#0f0"]），禁止传入javascript:或 CSS 表达式防 XSS - 单连接每秒发送弹幕上限设为 3–5 条，用滑动窗口计数器（如 Redis + Lua）实现，超限直接
ws.close(4403, "rate limited")
前端弹幕渲染必须用 transform + requestAnimationFrame 控制密度
DOM 元素暴力 appendChild + left 动画在 100+ 条/秒时必然卡顿，这不是代码写得不好，而是浏览器重排开销爆炸。
WebSocket 8.18.2
下载
WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。
- 所有弹幕元素统一用
position: absolute，初始transform: translateX(100vw)，动画只改transform值 - 用
requestAnimationFrame而非setInterval驱动位移，确保与屏幕刷新率同步 - 动态计算最大并发弹幕数：取
Math.min(15, window.innerHeight / 48)（假设每条高 48px），超出则丢弃或暂存队列 - 禁用
will-change: left，它在低端设备上反而引发更多合成层开销
Nginx WebSocket 代理必须关闭缓冲并透传 Upgrade 头
本地跑通的弹幕服务一上生产就“偶发断连”或“首屏无弹幕”，90% 是 Nginx 配置没对。它默认把 WebSocket 当普通 HTTP 处理，缓存响应、提前关连接。
- 必须显式设置
proxy_http_version 1.1，否则协议升级失败，返回 400 -
proxy_set_header Upgrade $http_upgrade和proxy_set_header Connection "upgrade"缺一不可，漏掉任一都会导致握手卡在 101 状态之前 -
proxy_buffering off是底线，否则弹幕消息被攒批发送，实时性归零 -
proxy_read_timeout 86400不是“越长越好”，而是要大于客户端心跳间隔（如客户端每 30s 心跳，则此值至少设为 45s）
重复弹幕必须靠服务端时间戳 + 客户端滑动窗口去重
抖音、B站等平台在弱网下会重发同一条弹幕，前端如果无脑渲染，会出现“同一句话刷屏 3 次”。靠客户端 Set 缓存 ID 不可靠——页面刷新就丢，多标签页不同步。
- 服务端在广播前必须注入
server_ts（毫秒级 Unix 时间戳），不能用Date.now()，要用process.hrtime()或 NTP 同步时间 - 客户端维护一个 5 秒滑动窗口，用
Map<string, number>存`${text}-${userId}-${server_ts}` → timestamp，收到新消息先查是否已存在且时间差 - 不依赖消息 ID 做去重——某些平台 ID 是客户端生成的，可能重复；必须绑定内容 + 用户 + 服务端时间三元组
- 去重逻辑放在
message事件回调最开头，避免后续解析、渲染、DOM 操作白白执行
真正难的不是连上 WebSocket，而是让每条弹幕都“该出现时才出现、该消失时就消失、不该出现的一次都不出现”。时间同步、密度控制、去重粒度、代理配置，任何一个点松动，高并发下都会被放大成雪崩效应。
