layui表格不能直接配置url为websocket地址，因为其内部强制使用http请求机制，写入ws://会触发fetch错误；正确做法是禁用url、改用data模式初始化，再通过table.reload()手动载入websocket推送的数据，并复用原始配置以保留分页、排序等状态。
直接用 table.reload() 配合 websocket 收到的数据就能刷新表格，但必须绕开 url 自动请求机制——layui 表格默认走 http，不支持原生 websocket 绑定。
为什么不能直接配 url + WebSocket？
Layui 的 table.render() 一旦设置了 url，就会在初始化、分页、排序时自动发起 HTTP GET 请求，完全不感知 WebSocket 连接。你强行把 url: 'ws://...' 写进去，浏览器会报 Failed to execute 'fetch' on 'Window': Invalid URL 或直接静默失败。
正确做法是：禁用 url，改用 data: [] 初始化，所有数据靠 WebSocket 主动推送后手动载入。
-
url和data是互斥的——二者只能选其一 - 即使只写
url: null，Layui 内部仍会尝试 fetch，必须彻底删掉或留空字符串（但空字符串也会触发错误） - 分页控件依然可用，但翻页逻辑得自己控制，不能依赖
where参数自动拼接
table.reload() 怎么传 WebSocket 数据才不丢状态？
用 table.reload() 更新时，如果只传 data，会导致分页器重置、当前页码跳回第 1 页、排序状态丢失。关键是要保留原始配置中除 data 外的所有参数。
推荐写法：先缓存初始化配置，reload 时复用：
WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。
const tableConfig = {
elem: '#demo',
data: [],
page: { layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] },
limit: 20,
cols: [[ /* 列定义 */ ]]
};
table.render(tableConfig);
<p>// WebSocket 收到数据后
socket.onmessage = function(event) {
const payload = JSON.parse(event.data);
table.reload('demo', {
data: payload.rows || [],
count: payload.total || 0,
// 其他配置从 tableConfig 复制，避免覆盖 page/limit/cols 等
page: tableConfig.page,
limit: tableConfig.limit,
cols: tableConfig.cols
});
};</p>
- 不要用
table.renderData()替代reload()：它只更新数据，但不会同步更新分页器显示的总条数（count） -
table.reloadData()是 2.8+ 新增方法，但仅适用于 HTTP 场景下的“重拉数据”，底层仍会发请求，不适用 WebSocket - 如果表格有固定列（
fixed: 'left'），reload 后 DOM 结构可能错位，需加done回调里手动调用layui.table.resize()
WebSocket 断连或首次连接慢时，表格怎么不空白？
WebSocket 建立连接有延迟，而 table.render() 执行极快，data: [] 会导致表格立刻渲染空内容。用户看到“加载中”比看到空白更可信。
- 初始化时加 loading 效果：
loading: true（Layui 2.8+ 支持） - 连接成功后再关闭 loading：
ws.onopen = () => table.reload('demo', { loading: false }) - 断连时主动设空数据并提示：
ws.onclose = () => table.reload('demo', { data: [], count: 0, loading: false }) - 服务端首次推送前，前端可预置 mock 数据占位，避免视觉跳跃
注意：Layui 没有内置重连机制，断连后需手动 new WebSocket() 并重新绑定事件，且要避免重复绑定 onmessage —— 每次新建连接前，记得先清除旧实例的监听器。
后端推送的数据结构怎么和 Layui 表格对齐？
Layui 表格要求 data 是数组，count 是总数。但 WebSocket 推送的数据格式完全由后端决定，常见坑点：
- 后端返回
{ list: [...], total: 100 }，前端必须解包：data: payload.list, count: payload.total - 字段名大小写不一致（如后端发
user_name，表格field配的是userName）→ 渲染为空 - 时间戳没转成字符串，Layui 单元格直接显示
[object Object]→ 必须提前格式化好再推送 - 分页参数（
page、limit）若由前端控制，后端需按此参数返回对应页数据；若由后端分页，则推送时必须带curr字段，reload 时传给page.curr
最稳妥的方式：前后端约定固定字段名，且后端返回结构严格匹配 { data: [...], count: N }，前端不做任何字段映射或转换。
