send()发送ArrayBuffer是高效传输二进制数据的核心方式,需通过TypedArray填充、传.buffer属性、服务端启用二进制帧并分片,接收端设binaryType='arraybuffer'以提升解析一致性。

直接用 send() 发送 ArrayBuffer 是高效传输二进制数据的核心方式,关键在于避免中间转换、确保底层字节原样送达,同时配合 WebSocket 的二进制帧机制减少协议开销。
发送前必须构造正确的 ArrayBuffer 或 TypedArray 实例
ArrayBuffer 本身不可直接读写,需通过 TypedArray(如 Uint8Array、Int32Array)或 DataView 填充数据。常见来源包括:
- 从
fetch().arrayBuffer()获取的远程资源 - Canvas 导出:
canvas.toBlob(blob => { ... }, 'image/png')后转为ArrayBuffer - WebAssembly 内存视图:
wasmInstance.exports.memory.buffer - 手动创建:
const buf = new ArrayBuffer(1024); const view = new Uint8Array(buf); view.set([0x48, 0x65, 0x6C, 0x6C, 0x6F]);
调用 send() 时传入 .buffer 属性而非 TypedArray 本体
WebSocket 的 send() 方法接受 ArrayBuffer、Blob 或字符串。若传入 Uint8Array 等 TypedArray 实例,部分浏览器(尤其是旧版 Safari 和某些 Android WebView)可能静默失败或报错。
务必使用其底层缓冲区:
立即学习“前端免费学习笔记(深入)”;
- ✅ 正确:
ws.send(view.buffer)或ws.send(arrayBuffer) - ❌ 风险操作:
ws.send(view)(虽在 Chrome/Firefox 中常能工作,但不符合规范且兼容性不可靠)
服务端与网络层协同优化传输效率
仅前端正确发送还不够,需两端配合才能真正提升性能:
- 服务端应启用 WebSocket 的二进制帧支持(非 base64 编码文本帧),避免额外编码/解码耗时
- 对大块数据,考虑分片发送(如每 64KB 一帧),避免单帧过大触发浏览器内部限流或内存抖动
- 禁用 Nagle 算法(若服务端可控):减少小包合并延迟,适合高频低延迟场景(如实时音视频控制信令)
- 确认 WebSocket 连接已建立且状态为
OPEN,避免send()被丢弃(可监听onopen事件后执行)
接收端建议设 binaryType 提升解析一致性
虽然发送端不依赖此设置,但接收端显式指定可避免类型歧义:
-
ws.binaryType = 'arraybuffer'→event.data直接是ArrayBuffer,无需再做response.arrayBuffer()类转换 - 搭配
new Uint8Array(event.data)即可快速访问字节,适合协议解析、图像帧处理等场景 - 注意:该属性在所有现代桌面/移动浏览器(Chrome 12+、Firefox 11+、Edge 79+、Safari 12.1+)中稳定支持



















