WebRTC DataChannel 文件分块传输与断线恢复实践

概述DataChannel 在点对点场景下可进行低延迟传输。本文给出分块发送与确认、进度持久化的实现框架。基本连接与发送function supportsRTC() { return typeof RTCPeerConnection === 'function'; } async function sendFileDC(pc, file, size = 1024 * 512) { const dc = pc.createDataChannel('file'); let idx = await loadProgress(file.name); dc.onmessage = async e => { const m = JSON.parse(e.data); if (m.type === 'ack') { idx++; await saveProgress(file.name, idx); } }; for await (const chunk of chunkFile(file, size)) { if (idx && idx > 0) { idx--; continue; } dc.send(chunk); } } 进度持久化function openDB(name) { return new Promise((resolve, reject) => { const r = indexedDB.open(name, 1); r.onupgradeneeded = () => { const db = r.result; if (!db.objectStoreNames.contains('rtc')) db.createObjectStore('rtc'); }; r.onsuccess = () => resolve(r.result); r.onerror = () => reject(r.error); }); } async function saveProgress(key, val) { const db = await openDB('rtc'); const tx = db.transaction('rtc', 'readwrite'); tx.objectStore('rtc').put(val, key); await new Promise((resolve, reject) => { tx.oncomplete = resolve; tx.onerror = () => reject(tx.error); }); db.close(); } async function loadProgress(key) { const db = await openDB('rtc'); const tx = db.transaction('rtc', 'readonly'); const req = tx.objectStore('rtc').get(key); const v = await new Promise((resolve, reject) => { req.onsuccess = () => resolve(req.result || 0); req.onerror = () => reject(req.error); }); db.close(); return v; }