WebSocket支持直接发送Blob对象，浏览器自动处理二进制序列化，是文件实时传输最简洁高效的方式；需注意连接状态、分片发送、元信息传递、后端Buffer解析、安全性及兼容性优化。
WebSocket 支持直接发送 Blob 对象，无需手动转为 base64 或 ArrayBuffer，浏览器底层会自动处理二进制序列化。这是实现文件实时传输最简洁高效的方式。
前端：创建 Blob 并通过 WebSocket 发送
用户选择文件后，可直接将 File（继承自 Blob）传给 ws.send()：
- 确保 WebSocket 连接已打开（检查
ws.readyState === WebSocket.OPEN） - 支持分片发送大文件，避免阻塞或内存溢出；可用
slice(start, end)分段 - 建议在发送前记录文件元信息（如 name、size、type），以
JSON.stringify()单独发送或封装进ArrayBuffer头部 - 示例：
const file = input.files[0];<br>ws.send(file); // 直接发送 File/Blob
后端：接收并解析 Blob 数据（以 Node.js + ws 库为例）
ws 库接收到的二进制数据默认为 Buffer，需结合前端传来的元信息还原文件：
- 监听
message事件，用isBinary判断是否为二进制帧 - 若同时发送了 JSON 元数据，建议先收一次文本帧，再收对应次数的二进制帧
- 使用
fs.createWriteStream()流式写入磁盘，避免全量加载到内存 - 注意设置超时和最大帧大小（
maxPayload），防止恶意大包攻击
关键注意事项与优化点
原生 WebSocket 传输 Blob 虽简单，但实际应用中需规避常见陷阱：
- 不支持跨域 Cookie 认证，登录态建议用 token 放在
Sec-WebSocket-Protocol或首次连接时发 handshake 消息 - 无内置重传或断点续传，大文件传输建议加简单校验（如 MD5 前置发送，服务端比对）
- 移动端弱网下易断连，需实现重连逻辑 + 已发偏移量缓存（配合分片）
- Chrome/Firefox 支持良好；Safari 对大于 128MB 的 Blob 可能触发内存警告，建议单次不超过 32MB
替代方案对比：Blob vs ArrayBuffer vs Base64
三种方式均可行，但适用场景不同：
- Blob：最轻量，零拷贝发送，适合浏览器端直传，兼容性好（IE10+）
-
ArrayBuffer：适合需要精细控制字节（如协议头、加密）的场景，需
new Blob([buffer])或ws.send(buffer) - Base64：体积膨胀约 33%，增加编解码开销，仅推荐用于调试或极小文件（如图标）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
