怎么在HTML中通过WebSocket的binaryType设置接收二进制数据的格式-html教程-PHP中文网

应根据后续数据处理方式选择：需逐字节解析时设"arraybuffer"，需直接传递给url.createobjecturl等api时设"blob"；binarytype仅控制event.data的js表示类型，不影响传输格式。

怎么在html中通过websocket的binarytype设置接收二进制数据的格式

binaryType 设置成 `"arraybuffer"` 还是 `"blob"`？

取决于你后续怎么处理数据。WebSocket.binaryType 控制的是 onmessage 事件中 event.data 的类型，不是传输格式（WebSocket 协议本身不区分文本/二进制帧类型），而是浏览器解包后的 JS 表示方式。

选 "arraybuffer"：适合需要逐字节解析、配合 TypedArray 或 DataView 操作的场景（比如解析自定义协议、图像头信息、音频帧）；选 "blob"：适合直接传给 URL.createObjectURL()、FileReader 或 fetch() 等 API，避免内存拷贝，但无法直接读取内容。

"arraybuffer" 会把整帧二进制数据一次性加载进内存，适合中小体积、需随机访问的数据
"blob" 是惰性引用，不立即解码，适合大文件（如视频片段），但读取前必须用 blob.arrayBuffer() 或 blob.text() 显式转换
设置后只影响后续收到的消息，已接收未处理的 message 不受影响

设置时机必须在 WebSocket 打开连接之后

不能在 new WebSocket() 实例化后立刻设 binaryType，因为此时连接可能还未建立，但也不必等到 onopen 回调——只要实例创建完成就能设，只是要确保在第一次 onmessage 触发前完成赋值，否则首条二进制消息可能按默认 "blob" 处理（Chrome 默认是 "blob"，Firefox 是 "arraybuffer"，行为不一致）。

Wechat HTML Publisher

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

下载

安全写法是在 onopen 回调里设：

ws.onopen = () => { ws.binaryType = "arraybuffer"; };

也可以在 new WebSocket() 后立即设，但不要晚于监听 onmessage
如果用 addEventListener("open", ...)，则必须在该监听器内设置，不能依赖事件注册顺序

接收到的 `event.data` 类型不匹配怎么办？

常见错误是设了 binaryType = "arraybuffer"，却用 event.data.text() 或直接当字符串用，结果报错 TypeError: event.data.text is not a function；或者设了 "blob" 却尝试 new Uint8Array(event.data)，报 TypeError: Failed to construct 'Uint8Array': The provided value is not of type '(ArrayBuffer or ArrayBufferView)'。

检查 event.data.constructor.name 确认实际类型，别只信自己设的值
对 ArrayBuffer：用 new Uint8Array(event.data) 或 new DataView(event.data)
对 Blob：先 event.data.arrayBuffer().then(buf => {...})，注意这是异步操作
服务端发的是文本帧（opcode 1），即使设了 binaryType，event.data 仍是 string，不会自动转成二进制

为什么有时候 `binaryType` 像没生效？

最常被忽略的是服务端发送时用了错误的 opcode。WebSocket 协议靠帧头的 opcode 区分文本（1）和二进制（2）。如果服务端用文本帧发送二进制数据（比如 Node.js 的 ws.send(buffer, { binary: false })），浏览器仍会把 event.data 当字符串处理，binaryType 完全无效。

确认服务端发送逻辑：例如 ws.send(data, { binary: true })（ws 库）或 socket.write(...) 前明确标记为二进制帧
用浏览器 DevTools 的 Network → WS → Frames 查看每帧的 Type 列，必须是 Binary 而非 Text
某些代理或中间件（如 Nginx WebSocket proxy）可能篡改帧类型，导致降级为文本帧

设置 binaryType 看似简单，真正卡住人的往往是服务端帧类型不匹配、或混淆了 Blob 的异步读取路径——这两点比选 "arraybuffer" 还是 "blob" 更容易出问题。