WebSocket 心跳与断线重连及上传恢复实践

概述心跳与重连能显著提升弱网下的可靠性。本文展示进度持久化与重连后的续传。心跳与续传function openDB(name) { return new Promise((resolve, reject) => { const r = indexedDB.open(name, 1); r.onupgradeneeded = () => { const db = r.result; if (!db.objectStoreNames.contains('ws')) db.createObjectStore('ws'); }; r.onsuccess = () => resolve(r.result); r.onerror = () => reject(r.error); }); }

async function saveIndex(name, idx) { const db = await openDB('wsup'); const tx = db.transaction('ws','readwrite'); tx.objectStore('ws').put(idx, name); await new Promise((res, rej) => { tx.oncomplete = res; tx.onerror = () => rej(tx.error); }); db.close(); }

async function loadIndex(name) { const db = await openDB('wsup'); const tx = db.transaction('ws','readonly'); const req = tx.objectStore('ws').get(name); const v = await new Promise((res, rej) => { req.onsuccess = () => res(req.result||0); req.onerror = () => rej(req.error); }); db.close(); return v; }

async function connect(url, onOpen) {

const ws = new WebSocket(url);

ws.binaryType = 'arraybuffer';

await new Promise(res => { ws.onopen = res; });

const timer = setInterval(() => ws.readyState === 1 && ws.send(JSON.stringify({ type:'ping' })), 5000);

ws.onclose = () => clearInterval(timer);

onOpen(ws);

}

async function resumeUpload(url, file, size = 512*1024) {

const name = file.name; const startIdx = await loadIndex(name);

await connect(url, async ws => {

let i = 0; for (let o=0;o<file.size;o+=size) {

const b = file.slice(o, o+size); const ab = await b.arrayBuffer();

if (i < startIdx) { i++; continue; }

const head = new TextEncoder().encode(JSON.stringify({ type:'chunk', index:i, name }));

const merged = new Uint8Array(head.length + ab.byteLength);

merged.set(head, 0); merged.set(new Uint8Array(ab), head.length);

ws.send(merged); i++;

ws.onmessage = async e => { const m = JSON.parse(new TextDecoder().decode(new Uint8Array(e.data))); if (m.type === 'ack') await saveIndex(name, m.index+1); };

}

});

}