WebSocket实现文件上传进度条实时返回上传百分比【实战】-js教程-PHP中文网

websocket不能直接传文件实现进度条，本质是“http传文件+websocket推进度”的混合模式；需用uploadid关联http请求与websocket会话，后端主动触发进度更新并校验防伪造。

websocket实现文件上传进度条实时返回上传百分比【实战】

不能用 WebSocket 直接传文件来实现进度条——它没有内置的 loaded/total 语义，浏览器也根本不支持把 FormData 塞进 WebSocket.send()。所有“WebSocket 实现上传进度”的方案，本质都是「HTTP 传文件 + WebSocket 推进度」的混合模式。

为什么 XMLHttpRequest 的 progress 事件不够用

前端用 fetch 或 XMLHttpRequest 上传时，progress 事件确实能拿到当前已上传字节数，但它只在本次请求生命周期内有效：

页面刷新或意外关闭后，进度彻底丢失，无法恢复
同一文件在多个设备（如手机+电脑）上查看进度时，彼此不同步
服务端无法主动干预或注入额外状态（比如“正在转码”“校验中”）
某些代理或 CDN 会缓冲整个请求体，导致 progress 长时间卡在 0% 或 100%

必须用 uploadId 关联 HTTP 请求和 WebSocket 会话

关键不是“连上 WebSocket”，而是让后端能把某次 HTTP 上传和某个 WebSocket 连接稳定绑定。常见做法是：

WebSocket 8.18.2

WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。

下载

前端生成唯一 uploadId（如 file_1748193065221），在 FormData 中作为字段提交：formData.append('uploadId', uploadId)
前端同时用该 uploadId 作为 WebSocket 连接参数（如 ws://localhost:8080/progress?uploadId=file_1748193065221）
后端收到 HTTP 请求后，解析出 uploadId，查到对应 WebSocket session，后续每更新一次进度就调用 session.sendMessage(...)
避免用内存 Map 存 session（如 ConcurrentHashMap），生产环境应结合 Redis 做跨实例共享，否则负载均衡下会丢进度

Multer / Spring Boot 中如何安全暴露进度数据

进度数据不能靠轮询或定时器硬扫，而应由文件处理流程主动触发。例如：

Node.js + Multer：监听 fileFilter 和 storage.filename 钩子，在写入磁盘每个 chunk 后计算并推送进度；不要等整个文件写完再发第一条消息
Spring Boot：用 @RequestParam MultipartFile file 接收后，手动流式读取 file.getInputStream()，每读 8192 字节就更新一次 Redis 中的 progress:{uploadId}，再通知 WebSocket 广播
若走 OSS 分片上传，进度应基于 listParts 返回的已上传分片数计算，而非本地文件大小——因为网络抖动可能导致某片重传多次
务必设置超时清理：Redis 中的 progress:{uploadId} 应带 TTL（如 2 小时），避免堆积过期数据