如何在 ws 服务器中正确接收客户端发送的 ArrayBuffer 数据-js教程-PHP中文网

如何在 ws 服务器中正确接收客户端发送的 ArrayBuffer 数据

本文详解如何在 Node.js 的 ws 库中将接收到的 Buffer 安全转换为标准 ArrayBuffer，避免因 byteOffset 和 byteLength 不匹配导致的位流解析错误（如 messageType 读取异常）。

本文详解如何在 node.js 的 `ws` 库中将接收到的 `buffer` 安全转换为标准 `arraybuffer`，避免因 `byteoffset` 和 `bytelength` 不匹配导致的位流解析错误（如 `messagetype` 读取异常）。

WebSocket 协议本身不区分数据类型，ws 库在接收到二进制消息时统一以 Buffer 实例传递给 message 事件处理器。虽然 Buffer 是 Uint8Array 的子类，且拥有 .buffer 属性，但直接使用 data.buffer 存在严重隐患：该 ArrayBuffer 可能被多个 Buffer 实例共享，其 byteOffset 和 byteLength 并不总是从 0 开始、覆盖全部字节。若忽略这些元信息，直接传入 BitStream 等依赖完整内存视图的库，就会读取到错误偏移处的数据——这正是问题中 messageType 显示 130（而非预期的 1）的根本原因。

正确的做法是显式提取逻辑上属于当前消息的内存片段：

socket.on("message", (data: Buffer) => {
  // ✅ 安全提取对应 ArrayBuffer 片段
  const pkt = data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
  const stream = new BitStream(pkt);

  const messageType = stream.readUint8();
  switch (messageType) {
    case ClientMessageType.TICK: {
      const x = stream.readUint16();
      const y = stream.readUint16();
      plrCursor.pos = [x, y];
      updatedCursors.push(plrCursor.id);
      console.log(`Cursor ${plrCursor.id} moved to ${x}, ${y}`);
      break;
    }
    default:
      console.warn(`Unknown message type: ${messageType}`);
  }
});

⚠️ 注意事项：

Prompt Log
一款AI开发辅助工具，主要用于从 AI 编程会话日志（Clawdbot、Claude Code、Codex）中提取对话记录。该功能用于在用户要求导出提示词历史、会话日志或 `.jsonl` 格式的会话文件时使用，适合需要提升相关任务效率的用户。

下载

切勿直接使用 data.buffer：它可能指向一个更大的底层 ArrayBuffer，而 data 仅是其中一段视图；

必须结合 byteOffset 和 byteLength：这是唯一能准确还原原始发送字节范围的方式；

slice() 返回新 ArrayBuffer：ArrayBuffer.prototype.slice() 创建的是独立副本，不会影响原缓冲区，适合后续解析；

类型提示增强可维护性：建议为 data 参数标注 Buffer 类型（如 TypeScript），避免误用字符串或其它类型。