JavaScript 中怎么用 WebSocket 实现大文件分片传输与进度通知-js教程-PHP中文网

websocket本身不直接支持文件分片或进度通知，但可构建可靠分片上传机制：前端用blob.slice()切片并发送arraybuffer，每片带元数据；服务端按序接收、校验、缓存并主动推送json进度消息；前端监听更新ui，结合localstorage实现断点续传。

javascript 中怎么用 websocket 实现大文件分片传输与进度通知

WebSocket 本身不直接支持文件分片或进度通知，但可以基于它构建可靠的分片上传机制。关键在于：前端手动切片、按序发送、服务端拼接；同时通过 WebSocket 主动推送进度（如已接收块数/总块数）给前端。

使用 Blob.slice() 或 ArrayBuffer 将大文件切为固定大小的块（如 512KB），每块带上元数据（文件 ID、分片序号、总片数、文件名等）：

Node.js（如 ws 库）需配置 binaryType: 'arraybuffer'，并按文件 ID 缓存分片：

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

收到分片后校验序号、MD5（可选），存入内存 Map 或临时目录（如 /tmp/upload_${id}_${index}）
每接收一片，立即向该客户端推送 JSON 进度消息：{ type: 'progress', fileId, received: 3, total: 12 }
当所有分片收齐，调用 fs.appendFile 按序合并，再触发完整文件处理（如转码、存储）
设置超时清理未完成上传（如 30 分钟无新分片则删除缓存）

WebSocket 是双向通道，服务端可在任意时刻主动推送进度，前端监听并更新 UI：

连接建立后，前端发送 { type: 'init', fileId, fileName, fileSize } 启动上传会话
监听 ws.onmessage，识别 progress 类型消息，计算百分比：Math.round((msg.received / msg.total) * 100)
用 <progress></progress> 或自定义进度条实时渲染，支持暂停/续传（只需记录最后成功序号）
最终收到 { type: 'complete', url } 时显示成功并跳转

生产环境需考虑断网、刷新、并发等场景：

前端本地持久化上传状态（localStorage 存 fileId → { lastIndex, total, uploaded: Set }），页面恢复后自动续传
服务端生成唯一 uploadId 关联会话，避免多设备冲突
对每个分片加简单校验（如长度 + 时间戳哈希），防止乱序或重复写入
限制单连接最大并发分片数（如一次只发 3 片），避免压垮服务端内存

不复杂但容易忽略。核心是把 WebSocket 当成低延迟信道，分片逻辑、状态管理、错误恢复都由业务层把控。