Apifox实战：如何高效处理WebSocket返回的二进制数据并整合为文件

1次阅读

共计 1716 个字符，预计需要花费 5 分钟才能阅读完成。

在日常开发中，我们经常遇到需要通过 WebSocket 传输二进制数据（如图片、音视频等）的场景。相比于传统文本数据，二进制数据传输和处理面临以下挑战：

数据分片问题：大文件会被分成多个数据包传输，需要正确处理顺序和完整性
内存占用高：二进制数据体积大，不当处理易导致内存溢出
性能瓶颈：数据重组和转换过程可能成为系统性能短板

Apifox 提供了完整的 WebSocket 支持，特别适合处理二进制数据流：

可视化的二进制数据查看器
内置的流量控制和内存管理机制
便捷的 Mock 服务，方便测试各类边界情况
完整的调试历史记录，便于问题排查

// 创建 WebSocket 连接
const socket = new WebSocket('wss://your-api-endpoint');

// 二进制数据接收处理
socket.binaryType = 'arraybuffer';

// 存储接收到的数据块
let receivedChunks = [];
let totalSize = 0;

socket.onmessage = function(event) {if (event.data instanceof ArrayBuffer) {
    // 处理二进制数据
    const chunk = new Uint8Array(event.data);
    receivedChunks.push(chunk);
    totalSize += chunk.length;

    // 检查是否接收完成（根据业务协议判断）if (isTransferComplete(chunk)) {assembleFile(receivedChunks, totalSize);
      receivedChunks = [];
      totalSize = 0;
    }
  }
};

function assembleFile(chunks, totalSize) {
  // 创建足够大的缓冲区
  const buffer = new Uint8Array(totalSize);
  let offset = 0;

  // 合并所有数据块
  for (const chunk of chunks) {buffer.set(chunk, offset);
    offset += chunk.length;
  }

  // 转换为文件对象
  const blob = new Blob([buffer], {type: 'application/octet-stream'});

  // 生成下载链接
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'received_file.bin';
  a.click();

  // 释放内存
  URL.revokeObjectURL(url);
}

在 Apifox 中进行 WebSocket 调试时：