Sanntidsstrømmesystemer (WebRTC + sanntidsdata) · leksjon

Filoverføring via WebRTC-datakanaler

Lær å sende filer direkte mellom deltakere gjennom WebRTC-datakanaler, inkludert oppdeling i biter, tilbakepress, rekkefølge og sporing av fremdrift.

Leksjon 4 av 413 trinn

Filoverføring via WebRTC-datakanaler er en gratis leksjon i Sanntidsstrømmesystemer (WebRTC + sanntidsdata) på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Sanntidsstrømmesystemer (WebRTC + sanntidsdata), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Sanntidsstrømmesystemer (WebRTC + sanntidsdata) inneholder totalt 4 leksjoner.

Mer enn chat: sende filer

WebRTC-datakanaler er ikke begrenset til tekstchat. De kan overføre vilkårlige binærdata, noe som gjør node-til-node-filoverføring mulig uten å laste opp til en server.

Dette holder store filer borte fra infrastrukturen din og reduserer forsinkelsen.

Binærtyper i kanalen

En datakanal kan sende strenger eller binærdata. For filer angir du binaryType, slik at mottatte data kommer som en ArrayBuffer.

const channel = pc.createDataChannel('file');
channel.binaryType = 'arraybuffer';

Hvorfor du må dele opp dataene

Du kan ikke sende en fil på 500MB i én melding. Kanaler har en maksimal meldingsstørrelse (vanligvis rundt 256KB). Send filen som en serie biter.

Del filen opp i deler med fast størrelse.
Send hver del i riktig rekkefølge.
Sett dem sammen igjen hos mottakeren.

Dele opp en fil

Nettleserens File-objekt støtter slice(), som returnerer en Blob du kan lese 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();
}

Sende metadata først

Før byte-ene sender du en liten JSON-header, slik at mottakeren kjenner filnavnet, typen og den totale størrelsen. Da kan den vise fremdrift og bygge den endelige blob-en riktig.

channel.send(JSON.stringify({
  name: file.name,
  size: file.size,
  type: file.type
}));

Problemet med backpressure

Hvis du sender biter raskere enn nettverket tømmer dem, vokser sende-bufferen, og siden kan krasje. Følg med på bufferedAmount og sett sendingen på pause når verdien er høy.

channel.bufferedAmountLowThreshold = 65536;
if (channel.bufferedAmount > 1 * 1024 * 1024) {
  await new Promise(r =>
    channel.addEventListener('bufferedamountlow', r, { once: true }));
}

Levering i riktig rekkefølge og med pålitelighet

Som standard er datakanaler ordnet og pålitelige (som TCP), noe som er akkurat det filoverføring trenger.

For filer må du ikke bruke alternativene for uordnet eller upålitelig levering, som passer godt for spilltilstand. Behold standardinnstillingene.

Sette sammen data hos mottakeren

Mottakeren samler hver ArrayBuffer til den totale mottatte mengden er lik den oppgitte størrelsen, og bygger deretter 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);
  }
};

Vise fremdrift

Beregn en prosentandel ut fra sendte eller mottatte byte sammenlignet med total størrelse. Oppdater brukergrensesnittet i begge ender, slik at brukerne ser en fremdriftslinje i sanntid.

const percent = Math.round((received / meta.size) * 100);

Utløse nedlastingen

Gjør den ferdige Blob-en om til en nedlastbar lenke ved hjelp av 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ålitelighet og gjenopptakelse

Hvis en tilkobling faller ut midt i overføringen, kan du fortsette ved å spore den sist bekreftede forskyvningen og starte på nytt derfra. Kombiner dette med kontrollsummer for å bekrefte integriteten til slutt.

Hurtigsjekk

Test forståelsen din av filoverføring via datakanaler.

Besvar den i den interaktive leksjonen

Oppsummering

P2P-filoverføring via datakanaler: send metadata, del opp i biter, håndter backpressure, behold ordnet og pålitelig levering, sett sammen til en Blob og last ned.

Gratis å komme i gang

Lær deg Sanntidsstrømmesystemer (WebRTC + sanntidsdata) med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Filoverføring via WebRTC-datakanaler» gratis?

Ja – hele teksten i «Filoverføring via WebRTC-datakanaler» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Sanntidsstrømmesystemer (WebRTC + sanntidsdata)-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Sanntidsstrømmesystemer (WebRTC + sanntidsdata) inneholder totalt 4 leksjoner.

Hva lærer jeg i «Filoverføring via WebRTC-datakanaler»?

Lær å sende filer direkte mellom deltakere gjennom WebRTC-datakanaler, inkludert oppdeling i biter, tilbakepress, rekkefølge og sporing av fremdrift. Du øver på Sanntidsstrømmesystemer (WebRTC + sanntidsdata) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Sanntidsstrømmesystemer (WebRTC + sanntidsdata)?

Ingen tidligere erfaring er nødvendig. Sanntidsstrømmesystemer (WebRTC + sanntidsdata) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Filoverføring via WebRTC-datakanaler»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Sanntidsstrømmesystemer (WebRTC + sanntidsdata)-leksjonen?

Ja. Alle Sanntidsstrømmesystemer (WebRTC + sanntidsdata)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Sanntidsstrømmesystemer (WebRTC + sanntidsdata)