Filoverførsel via WebRTC data channels
Lær at sende filer peer-to-peer gennem WebRTC data channels, inklusive chunking, backpressure, rækkefølge og sporing af fremdrift.
Filoverførsel via WebRTC data channels er en gratis Streaming-systemer i realtid (WebRTC og live-data)-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Streaming-systemer i realtid (WebRTC og live-data), og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Streaming-systemer i realtid (WebRTC og live-data)-kurset indeholder 4 lektioner i alt.
Mere end chat: Sendelse af filer
WebRTC-data channels er ikke begrænset til tekstchat. De kan transportere vilkårlige binære data, hvilket gør peer-to-peer-filoverførsel mulig uden at uploade til en server.
Det holder store filer væk fra din infrastruktur og reducerer latenstiden.
Binære typer på kanalen
En data channel kan sende strenge eller binære data. For filer angiver du binaryType, så modtagne data kommer ind som en ArrayBuffer.
const channel = pc.createDataChannel('file');
channel.binaryType = 'arraybuffer';Hvorfor du skal opdele data i chunks
Du kan ikke sende en fil på 500 MB i én besked. Kanaler har en maksimal beskedstørrelse (ofte omkring 256 KB). Send filen som en sekvens af chunks.
- Opdel filen i stykker med fast størrelse.
- Send hvert stykke i rækkefølge.
- Saml dem igen hos modtageren.
Opskæring af en fil
Browserens File-objekt understøtter slice(), som returnerer en Blob, du kan læse som en ArrayBuffer.
const CHUNK = 16 * 1024;
let offset = 0;
function nextChunk(file) {
const slice = file.slice(offset, offset + CHUNK);
offset += CHUNK;
return slice.arrayBuffer();
}Send metadata først
Før bytesene sender du en lille JSON-header, så modtageren kender filnavnet, typen og den samlede størrelse. Det gør det muligt at vise fremskridt og opbygge den endelige blob korrekt.
channel.send(JSON.stringify({
name: file.name,
size: file.size,
type: file.type
}));Problemet med backpressure
Hvis du sender chunks hurtigere, end netværket kan tømme dem, vokser sendebufferen, og siden kan gå ned. Hold øje med bufferedAmount, og sæt transmissionen på pause, når værdien er høj.
channel.bufferedAmountLowThreshold = 65536;
if (channel.bufferedAmount > 1 * 1024 * 1024) {
await new Promise(r =>
channel.addEventListener('bufferedamountlow', r, { once: true }));
}Ordnet og pålidelig levering
Data channels er som standard ordnede og pålidelige (ligesom TCP), hvilket er præcis det, filoverførsel har brug for.
Til filer skal du ikke bruge indstillingerne for uordnet eller upålidelig levering, som er velegnede til spiltilstand. Behold standardindstillingerne.
Samling hos modtageren
Modtageren samler hver ArrayBuffer, indtil den samlede modtagne mængde svarer til den annoncerede størrelse, og opbygger derefter en Blob.
const parts = [];
let received = 0;
channel.onmessage = (e) => {
parts.push(e.data);
received += e.data.byteLength;
if (received === meta.size) {
const blob = new Blob(parts, { type: meta.type });
save(blob, meta.name);
}
};Visning af fremskridt
Beregn en procentdel ud fra antallet af sendte eller modtagne bytes sammenlignet med den samlede størrelse. Opdatér brugergrænsefladen i begge ender, så brugerne kan se en live-fremskridtslinje.
const percent = Math.round((received / meta.size) * 100);Start af download
Omdan den færdige Blob til et downloadlink ved hjælp af en objekt-URL.
function save(blob, name) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = name; a.click();
URL.revokeObjectURL(url);
}Pålidelighed og genoptagelse
Hvis en forbindelse falder ud midt i overførslen, kan du genoptage den ved at holde styr på den senest bekræftede offset og starte igen derfra. Kombinér dette med checksums for at kontrollere integriteten til sidst.
Hurtigt tjek
Test din forståelse af filoverførsel via data channels.
Opsummering
P2P-filoverførsel via data channels: Send metadata, opdel i chunks, respekter backpressure, bevar ordnet og pålidelig levering, saml dataene i en Blob, og download.
Lær Streaming-systemer i realtid (WebRTC og live-data) med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 12
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Filoverførsel via WebRTC data channels” gratis?
Ja — hele teksten til “Filoverførsel via WebRTC data channels” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Streaming-systemer i realtid (WebRTC og live-data)-kurset, skal du opgradere til CoddyKit PRO. Streaming-systemer i realtid (WebRTC og live-data)-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Filoverførsel via WebRTC data channels”?
Lær at sende filer peer-to-peer gennem WebRTC data channels, inklusive chunking, backpressure, rækkefølge og sporing af fremdrift. Du øver dig i Streaming-systemer i realtid (WebRTC og live-data) med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Streaming-systemer i realtid (WebRTC og live-data)?
Der kræves ingen tidligere erfaring. Streaming-systemer i realtid (WebRTC og live-data) på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Filoverførsel via WebRTC data channels”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Streaming-systemer i realtid (WebRTC og live-data)-lektion?
Ja. Alle Streaming-systemer i realtid (WebRTC og live-data)-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Synkronisering af WebRTC-metadata
- Chat i realtid via data channels
- Deling af applikationstilstand i realtid
- Filoverførsel via WebRTC data channels