WebSocket在默认情况下接收二进制消息时，通常按ArrayBuffer来处理。 比较稳妥的做法，是在onopen里把binaryType设为'arraybuffer'。

拿到数据后，可以通过Uint8Array、DataView或TextDecoder来完成解析。发送二进制内容时，则传ArrayBuffer本身，或者传TypedArray.buffer。

另外还得留意Blob的兼容性问题，以及空buffer这类边界情况。

WebSocket 默认接收的二进制数据是 ArrayBuffer，但需要显式设置 binaryType 才能正确解析，否则可能收到 Blob 或解析失败。

设置 binaryType 为 'arraybuffer'

连接建立后、接收数据前，必须将 WebSocket 实例的 binaryType 设为 'arraybuffer'。

否则，event.data 可能是 Blob。尤其在未设置时，不同浏览器的行为可能不一致。

• 推荐在 onopen 回调中立即设置：
  ws.binaryType = 'arraybuffer';
• 若设为 'blob'，后续需手动调用 blob.arrayBuffer()，增加异步开销
• 不能在连接前设置（实例未初始化完成），也不能在 onmessage 中临时改——它只影响后续接收的数据

在 onmessage 中安全读取 ArrayBuffer

event.data 是 ArrayBuffer，不能直接操作。

通常需要借助 Uint8Array、DataView 或 TextDecoder 来解析。

• 基础字节读取：
  const uint8 = new Uint8Array(event.data); console.log(uint8[0]);
• 结构化读取（如含 header + payload）：
  const dv = new DataView(event.data); const len = dv.getUint32(0, false); // 大端
• 转字符串（UTF-8）：
  const decoder = new TextDecoder(); const str = decoder.decode(event.data);
• 避免直接 new Uint8Array(event.data) 后修改原 buffer —— 若需复用 buffer，先 slice() 防止意外共享

发送 ArrayBuffer 数据

发送时可直接传 ArrayBuffer、TypedArray（如 Uint8Array）或 DataView，WebSocket 自动处理。

• 构造并发送：
  const buf = new ArrayBuffer(4); const view = new DataView(buf); view.setUint32(0, 123456); ws.send(buf);
• 从已有数组发送：
  const arr = new Uint8Array([1, 2, 3, 4]); ws.send(arr.buffer); // 注意：send(arr) 也可，但底层仍用 buffer
• 注意：不要 send Uint8Array 实例本身（虽兼容），明确传 .buffer 更清晰；若只发部分，可用 arr.subarray(start, end).buffer

错误处理与兼容性注意

ArrayBuffer 支持度良好（IE10+），但仍需规避常见陷阱。

• 检查 event.data instanceof ArrayBuffer，避免因 binaryType 未设导致收到 Blob
• 服务端返回空 ArrayBuffer（event.data.byteLength === 0）是合法的，需主动判断
• 大文件分片传输时，前端需自行拼接 ArrayBuffer（用 Uint8Array 合并再 .buffer）
• 调试时可用 console.log(new Uint8Array(event.data).slice(0, 16)) 快速查看前 16 字节

《夸克》非常好用的免费AI浏览器

下载APP查看