websocket 实例必须全局唯一，应在独立入口脚本中初始化并挂载到 window；后续模块仅监听自定义事件，弹窗需去重节流；须手动实现心跳检测与指数退避重连；服务端消息必须携带 type、ref_id 等业务标识字段。
WebSocket 实例必须全局唯一，不能在 layui 页面里反复 new
页面每次刷新或路由跳转后，如果在某个 layui.use 模块里直接 new WebSocket(url)，就会新建连接，旧连接未 close() 就会堆积。后端看到的是多个 session ID，前端则出现弹窗重复、消息乱序、内存泄漏。
正确做法是：在所有 layui 页面加载前，用一个独立的入口脚本（比如 init-socket.js）初始化一次，并挂到全局对象上：
const socket = new WebSocket('wss://your-api.com/ws/notify');
socket.onopen = () => console.log('通知通道已连通');
socket.onmessage = (e) => {
const data = JSON.parse(e.data);
// 不在这里调 layui.layer.open，只发事件
window.dispatchEvent(new CustomEvent('ws:notify', { detail: data }));
};
window.$ws = socket; // 暴露给后续 layui 模块用
后续任何 layui 模块（如用户管理页、订单页）只需监听事件，不碰 socket 实例本身。
layui.layer.open 弹窗必须加去重和节流控制
服务端推送频率高时（比如秒级订单状态变更），onmessage 可能在 100ms 内触发多次，直接调 layer.open 会导致弹窗堆叠、遮挡、甚至浏览器卡顿。
实际要做的不是“禁用”，而是约束行为：
- 用 Map 缓存最近 5 秒内已展示过的
data.id或data.type + data.refId，重复 ID 直接跳过 - 用
setTimeout做最小间隔兜底，比如两次弹窗至少间隔 800ms - 把弹窗类型映射为不同 layer 样式：
type: 2（页面层）用于详情跳转，type: 1（文本层）用于纯提示，避免混用
示例节流逻辑：
window.addEventListener('ws:notify', (e) => {
const { id, title, content } = e.detail;
if (seenIds.has(id)) return;
seenIds.set(id, Date.now());
setTimeout(() => {
layer.open({
type: 1,
title: title,
content: `<div style="padding:15px">${content}</div>`,
area: ['320px', 'auto'],
offset: 'rb', // 右下角
time: 3000,
shadeClose: true
});
}, 800);
});
心跳检测和断线重连不能依赖 onclose 自动触发
onclose 事件在弱网、NAT 超时、代理中断等场景下经常不触发，导致前端“以为还连着”，但实际收不到消息。Layui 本身不提供心跳机制，必须手动补。
WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。
简单可靠的做法是：
- 连接建立后，用
setInterval每 25 秒发一次socket.send('ping') - 服务端收到后立即回
'pong'；前端监听onmessage中是否含'pong'，连续 2 次没收到就主动socket.close()并重连 - 重连前加指数退避：
1s → 2s → 4s → 8s，避免雪崩式请求
注意：不要用 setTimeout 递归重连，容易失控；用 clearInterval + setInterval 显式管理更稳。
服务端推送消息格式必须带业务标识字段
layui 层只负责“弹”，不负责“判”。如果后端推过来的只是 {"msg": "有新订单"}，前端无法知道该跳哪个页面、要不要去重、是否需权限校验。
约定必传字段能大幅降低前端胶水代码量：
-
type：固定值如"order_new"、"refund_approved"，便于 switch 分发 -
ref_id：关联业务主键，用于去重和跳转（如location.href = '/order/detail?id=' + ref_id） -
level：可选"info"/"warn"/"error"，控制 layer 图标和背景色
前端拿到后直接解构，不用再查表映射或硬编码判断：
if (data.type === 'order_new') {
layer.msg(`新订单 #${data.ref_id}`, { icon: 1 });
}
真正难的不是弹出来，而是让每一次弹窗都“有依据、可追溯、不打扰”。服务端字段设计不到位，前端就得写一堆 if-else 补救，后期维护成本翻倍。
