WebSocket 二进制文件上传与可靠性策略

概述WebSocket 提供低延迟双向通道。本文给出二进制分块上传与确认协商，并结合 IndexedDB 保存进度以实现断线恢复。分块上传与确认function supportsWS() { return typeof WebSocket === 'function'; } async function* chunkFile(file, size) { let o = 0; while (o < file.size) { const b = file.slice(o, o + size); const ab = await b.arrayBuffer(); yield new Uint8Array(ab); o += size; } } async function uploadWS(url, file, size = 1024 * 512) { if (!supportsWS()) throw new Error('ws not supported'); const ws = new WebSocket(url); await new Promise(resolve => { ws.binaryType = 'arraybuffer'; ws.onopen = resolve; }); let idx = await loadProgress(file.name); ws.onmessage = async e => { const msg = JSON.parse(new TextDecoder().decode(new Uint8Array(e.data))); if (msg.type === 'ack') { idx = idx + 1; await saveProgress(file.name, idx); } }; let i = 0; for await (const chunk of chunkFile(file, size)) { if (i < idx) { i++; continue; } const payload = JSON.stringify({ type: 'chunk', index: i, name: file.name }); const head = new TextEncoder().encode(payload); const merged = new Uint8Array(head.length + chunk.length); merged.set(head, 0); merged.set(chunk, head.length); ws.send(merged); i++; } } 进度持久化function openDB(name) { return new Promise((resolve, reject) => { const r = indexedDB.open(name, 1); r.onupgradeneeded = () => { const db = r.result; if (!db.objectStoreNames.contains('up')) db.createObjectStore('up'); }; r.onsuccess = () => resolve(r.result); r.onerror = () => reject(r.error); }); } async function saveProgress(key, value) { const db = await openDB('wsup'); const tx = db.transaction('up', 'readwrite'); tx.objectStore('up').put(value, key); await new Promise((resolve, reject) => { tx.oncomplete = resolve; tx.onerror = () => reject(tx.error); }); db.close(); } async function loadProgress(key) { const db = await openDB('wsup'); const tx = db.transaction('up', 'readonly'); const req = tx.objectStore('up').get(key); const val = await new Promise((resolve, reject) => { req.onsuccess = () => resolve(req.result || 0); req.onerror = () => reject(req.error); }); db.close(); return val; }