WebSocket开发：如何在JS中高效读取二进制Blob为ArrayBuffer？

我来帮你搞定这个二进制数据接收的难题！刚好之前做WebSocket二进制通信的时候也踩过类似的坑，给你几个实用的方案：

1. 最优方案：直接让WebSocket返回ArrayBuffer（零转换开销） #

这是最符合你需求的方法——在创建WebSocket实例后，设置binaryType属性为'arraybuffer'，这样服务端发送的二进制消息会直接以ArrayBuffer的形式出现在evt.data里，完全不需要转换，性能拉满。

代码示例：

// 创建WebSocket连接
const ws = new WebSocket('ws://your-server-address');

// 关键配置：指定接收二进制数据的类型为ArrayBuffer
ws.binaryType = 'arraybuffer';

ws.onmessage = function(evt) {
  // 这里evt.data已经是ArrayBuffer类型了
  const uint8Data = new Uint8Array(evt.data);
  
  // 接下来就可以像C++里那样操作二进制数据了
  // 比如读取第一个字节：uint8Data[0]
  // 读取多字节数值：new DataView(evt.data).getUint32(0, true)（小端模式）
  console.log('Received raw binary data:', uint8Data);
};

这个方法从根源上避免了Blob转换的额外开销，完全满足你追求最优性能的需求。

2. 修复你之前的Blob转ArrayBuffer错误 #

如果你暂时没法修改WebSocket的配置，需要处理Blob的话，之前的错误是因为await只能在async函数里使用。你可以把onmessage回调改成async函数，或者用Promise的.then()语法：

方法一：使用async回调 #

ws.onmessage = async function(evt) {
  if (evt.data instanceof Blob) {
    const arrayBuffer = await new Response(evt.data).arrayBuffer();
    const uint8Data = new Uint8Array(arrayBuffer);
    // 处理二进制数据
  }
};

方法二：使用Promise.then() #

ws.onmessage = function(evt) {
  if (evt.data instanceof Blob) {
    new Response(evt.data).arrayBuffer().then(arrayBuffer => {
      const uint8Data = new Uint8Array(arrayBuffer);
      // 处理二进制数据
    });
  }
};

不过还是强烈推荐第一种配置binaryType的方案，毕竟转换过程总会有额外的性能损耗。

3. 关于JSON冗余的顾虑 #

既然你已经在C端处理二进制数据很顺手，用binaryType = 'arraybuffer'之后，完全可以和服务端约定好二进制协议格式（比如固定的头部长度、字段偏移、字节序等），直接用Uint8Array或者DataView来解析数据，和C里操作字节流的方式完全一致，完全不需要JSON封装，彻底避免冗余开销。

这样下来，你就能在JS里高效地和C++服务端进行原始二进制通信啦！

内容的提问来源于stack exchange，提问作者user3210986