HTML5中利用ArrayBuffer在WebSocket中传输二进制流-H5教程-PHP中文网

html5 websocket默认支持二进制传输，设binarytype="arraybuffer"后可直接收发arraybuffer及视图（如uint8array、dataview），避免blob转换开销和base64编码；发送需传入缓冲区实例，接收后可用视图解析字节或结构化字段，并注意内存复用与帧大小限制。

html5中利用arraybuffer在websocket中传输二进制流

在HTML5中，WebSocket默认支持二进制数据传输，结合 ArrayBuffer 可高效发送和接收原始字节流（如图片、音频、协议包等），避免Base64编码开销和字符串解析负担。

启用WebSocket二进制类型

创建WebSocket连接后，需显式设置 binaryType 为 "arraybuffer"，否则接收到的二进制消息会以 Blob 形式返回，需额外读取转换：

ws.binaryType = "arraybuffer";
该设置应在 open 事件之后、发送/接收前完成
若未设置，onmessage 中 event.data 类型为 Blob，需用 blob.arrayBuffer() 转换，增加异步开销

发送ArrayBuffer数据

可直接调用 ws.send() 传入 ArrayBuffer 或其视图（如 Uint8Array、DataView）：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

例如构造一个4字节整数并发送：

const buf = new ArrayBuffer(4);<br>
    const view = new DataView(buf);<br>
    view.setUint32(0, 123456789, true); // 小端序<br>
    ws.send(buf);

也可发送已有的 typed array：ws.send(new Uint8Array([0x01, 0x02, 0x03]));
注意：不能直接发送普通对象或字符串；若需结构化数据，建议先序列化为 ArrayBuffer（如用 TextEncoder 编码字符串，或自定义二进制协议）

接收并解析ArrayBuffer

当 binaryType 设为 "arraybuffer" 后，onmessage 的 event.data 即为 ArrayBuffer 实例：

使用 Uint8Array 快速访问字节：

ws.onmessage = (e) => {<br>
      if (e.data instanceof ArrayBuffer) {<br>
        const bytes = new Uint8Array(e.data);<br>
        console.log("Received", bytes.length, "bytes:", bytes);<br>
      }<br>
    };

用 DataView 解析多字节字段（如头部+负载）：

const dv = new DataView(e.data);<br>
    const magic = dv.getUint16(0, false); // 大端序读取前2字节<br>
    const len = dv.getUint32(2, false);   // 接着读取4字节长度