如何从Node.js通过WebSocket发送二进制数据？解决客户端空缓冲区问题

我来帮你搞定这个问题——之前用Node.js的ws库发送二进制数据时也踩过类似的坑，核心问题在于没有正确配置WebSocket的二进制类型，以及发送时没有明确指定二进制模式。下面是修正后的完整方案：

一、服务端（Node.js + ws）修正代码 #

首先要确保服务端的WebSocket实例设置了正确的binaryType，并且发送时明确指定二进制选项：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8000 });

wss.on('connection', function connection(ws) {
  // 关键：设置服务端WebSocket的二进制类型为arraybuffer
  ws.binaryType = 'arraybuffer';

  // 创建你的Float32Array数据
  const arr1 = new Float32Array(4);
  for (let i = 0; i < arr1.length; ++i) {
    arr1[i] = (i + 100) / 7;
  }

  // 发送ArrayBuffer，同时显式指定binary选项
  ws.send(arr1.buffer, { binary: true }, (err) => {
    if (err) {
      console.error('二进制数据发送失败:', err);
    } else {
      console.log('数据已发送');
    }
  });
});

二、客户端（浏览器）接收代码 #

客户端必须设置binaryType为arraybuffer（默认是blob），这样才能直接拿到ArrayBuffer，再转换为Float32Array访问数据：

const ws = new WebSocket('ws://localhost:8000');

// 关键：设置客户端WebSocket的二进制类型为arraybuffer
ws.binaryType = 'arraybuffer';

ws.onopen = () => {
  console.log('与服务端连接成功');
};

ws.onmessage = (event) => {
  // 确认收到的是ArrayBuffer
  if (event.data instanceof ArrayBuffer) {
    // 将ArrayBuffer转换为Float32Array
    const receivedFloatArr = new Float32Array(event.data);
    
    // 现在可以直接访问数组中的数值了
    console.log('收到的Float32Array:', receivedFloatArr);
    console.log('第一个元素值:', receivedFloatArr[0]); // 应该是 (0+100)/7 ≈14.2857
  }
};

ws.onerror = (err) => {
  console.error('连接出错:', err);
};

三、核心注意事项 #

• 两端必须同步设置binaryType：不管是服务端还是客户端，只要涉及二进制数据传输，都要把binaryType设为arraybuffer，否则会收到Blob（客户端）或者无法正确解析的二进制数据。
• 发送时显式指定{ binary: true }：虽然ws库可以自动识别ArrayBuffer/TypedArray，但显式添加这个选项能避免潜在的解析歧义，确保消息被当作二进制发送。
• 错误排查：可以在ws.send的回调里检查是否有发送错误，同时在客户端的onerror事件里捕获连接异常，快速定位问题。

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