WebSocket接收不到后端消息 WebSocket前端缓冲区设置【避坑】-js教程-PHP中文网

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，就会静默失败。

正确做法是显式指定接收类型，并分块处理：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

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。