WebSocket 实现动态加载实时数据的关键在于建立稳定连接、设计支持增量更新的数据结构，并与 Layui 表格联动局部刷新。需处理连接状态、重连机制，按 action 类型精准更新 DOM 或 table.cache，协同分页逻辑避免状态丢失。
用 WebSocket 实现动态加载实时数据内容块，关键在于建立稳定连接、合理组织数据结构、并让前端能及时响应更新。它不是简单替换 Ajax 请求，而是构建一条“活”的数据通道。
建立可靠连接并监听消息
连接是实时通信的基础。不能只调用 new WebSocket(url) 就完事，要处理连接状态、重连和错误。
- 监听 onopen 事件确认握手成功，之后才可发送订阅指令（如
{"type":"subscribe","channel":"stock"}） - 在 onmessage 中解析服务器推送的 JSON 数据，区分类型：是新增一条记录、更新某条已有数据，还是批量刷新整个内容块
- 设置 onerror 和 onclose，检测断连后自动尝试重连（建议带指数退避，比如 1s、2s、4s…）
- 避免多个页面实例重复创建连接，可用单例模式或检查
window.ws是否已存在
数据格式设计要支持增量更新
服务器推送的数据结构直接影响前端如何渲染。不推荐每次全量替换 DOM，而应支持精准更新。
WebSocket 8.18.2
下载
WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。
- 每条消息至少包含 id（唯一标识）、action（如 "add" / "update" / "delete"）、payload（具体数据）
- 例如股票行情推送：
{"id":"SH600519","action":"update","payload":{"price":1824.5,"change":+3.2}} - 前端根据 id 查找对应 DOM 元素（如
document.getElementById('SH600519')），只更新价格和涨跌幅部分，不重绘整行 - 若需刷新列表，优先用虚拟滚动或 diff 算法比对新旧数组，最小化 DOM 操作
与 Layui 表格联动更新内容块
Layui 的 table 模块本身不内置 WebSocket 支持，需手动桥接。重点不是重载整个表格，而是局部刷新。
- 初始化表格时保留 tableIns 实例引用，后续通过
tableIns.cache获取当前缓存数据 - 收到新数据后，用 table.cache 找到对应行数据对象，直接修改其属性，再调用
table.reload()局部刷新（传入where或id参数限定范围） - 若新增数据需插入表格顶部，可用
tableIns.append(data)；删除则用tableIns.deleteRow(index) - 注意：Layui 2.8+ 支持
done回调，在 reload 后执行 DOM 更新逻辑，适合加动画或高亮变化项
处理分页与实时数据的协同
当表格启用分页时，“实时”和“分页”容易冲突——新数据可能不在当前页，但用户又需要感知。
- 服务器推送消息中可附带 pageInfo 字段，说明该数据属于哪一页（如
{"page":1,"total":127}），便于前端判断是否需更新页码显示 - 当前页数据变更（增/改/删）时，同步调整 count 和 page 参数，并触发
table.reload() - 非当前页的新数据，可暂存内存或通知栏提示（如“有 3 条新数据待查看”），点击后跳转对应页
- 避免在分页状态下频繁 reload 整表，否则会丢失当前页码和排序状态
