WebSocket前端收不到消息不一定是后端没发，需排查浏览器缓冲、uni-app/小程序绑定时机、二进制接收类型及组件生命周期导致的监听器失效等问题。
WebSocket前端收不到消息，真是后端没发？先查浏览器缓冲行为
不是所有“收不到”都等于“没发出来”。chrome、firefox 等现代浏览器对 websocket onmessage 事件的触发有隐式缓冲和调度机制：当消息帧快速连续到达时，浏览器可能合并回调、延迟派发，甚至在页面失焦时暂停处理。尤其在调试时用 console.log 打点，容易误判为“无响应”，实际是日志被节流或未 flush 到控制台。
验证方法很简单：在 onmessage 回调开头立即执行 performance.now() 打时间戳，并用 console.log + %c 样式强制刷新输出；或者改用 postMessage 向 iframe 或 worker 发送信号，绕过 console 缓冲干扰。
uni-app / 微信小程序里 WebSocket 消息“消失”的真实原因
uni-app 的 uni.connectSocket 和微信小程序的 wx.connectSocket 并非原生 WebSocket API 的简单封装，它们在底层做了连接池、重试、心跳代理等增强，但也引入了额外缓冲层。常见现象是：后端已调用 sendText 成功返回，但前端 onMessage 就是不触发。
- 必须确保
socketTask.onMessage在socketTask.onOpen触发之后才绑定——提前绑定无效 - 微信小程序要求
url必须是 wss 协议且域名已在后台配置白名单，ws 协议本地调试可行，上线必报错且静默丢包 - uni-app 中若使用
vue-router导航导致页面实例销毁，但 socketTask 未手动close，残留连接会继续接收消息，但回调无处可去，表现为“消息丢失”
前端接收大消息时卡死或截断？检查 ArrayBuffer 分配与视图构造
当后端发送超过几 MB 的二进制数据（如文件分片），前端用 event.data 接收时，默认可能是 Blob 类型而非 ArrayBuffer。直接调用 blob.arrayBuffer() 会触发完整读取并内存拷贝，若未 await 或未处理 rejection，就会静默失败。
正确做法是显式指定接收类型，并分块处理：
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
socket.binaryType = 'arraybuffer';
socket.onmessage = function(event) {
if (event.data instanceof ArrayBuffer) {
const view = new Uint8Array(event.data);
// 不要直接 new Blob([view]) 再转 arrayBuffer —— 避免二次拷贝
processChunk(view);
}
};
注意：socket.binaryType = 'blob' 时，event.data.size 可能远小于实际帧长度（浏览器内部做了流式截断），这是已知限制，务必切回 arraybuffer。
React/Vue 应用中 onMessage 回调丢失？警惕闭包与 this 绑定失效
在组件内定义 onMessage 时，若用箭头函数绑定，看似安全，但若组件卸载后 socket 仍存活（比如全局单例管理），回调中访问的 this.state 或 ref 已失效，某些框架会吞掉错误且不触发回调。
更稳妥的方式是：用 useRef 缓存最新回调引用，在 onmessage 中通过 current 调用；或在组件卸载时主动 socket.removeEventListener('message', handler)。
Vue 3 的 onBeforeUnmount 中忘记清理 socket.onmessage = null，会导致旧组件逻辑持续执行，而新组件无法注册新监听器——这种“监听器堆积”问题极难定位，只会在内存增长或消息乱序时暴露。
