Przesyłanie plików przez kanały danych WebRTC
Naucz się przesyłać pliki peer-to-peer przez kanały danych WebRTC, w tym dzielić je na fragmenty, obsługiwać backpressure i kolejność oraz śledzić postęp.
Przesyłanie plików przez kanały danych WebRTC to bezpłatna lekcja Real-Time Streaming Systems (WebRTC + Live Data) na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Real-Time Streaming Systems (WebRTC + Live Data), a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Real-Time Streaming Systems (WebRTC + Live Data) zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
Beyond Chat: Sending Files
WebRTC data channels are not limited to text chat. They can carry arbitrary binary data, which makes peer-to-peer file transfer possible without uploading to a server.
This keeps large files off your infrastructure and lowers latency.
Binary Types on the Channel
A data channel can send strings or binary. For files you set binaryType so received data arrives as an ArrayBuffer.
const channel = pc.createDataChannel('file');
channel.binaryType = 'arraybuffer';Why You Must Chunk
You cannot send a 500MB file in one message. Channels have a maximum message size (commonly around 256KB). Send the file as a sequence of chunks.
- Slice the file into fixed-size pieces.
- Send each piece in order.
- Reassemble on the receiver.
Slicing a File
The browser File object supports slice(), which returns a Blob you can read as an ArrayBuffer.
const CHUNK = 16 * 1024;
let offset = 0;
function nextChunk(file) {
const slice = file.slice(offset, offset + CHUNK);
offset += CHUNK;
return slice.arrayBuffer();
}Sending the Metadata First
Before the bytes, send a small JSON header so the receiver knows the file name, type, and total size. This lets it show progress and build the final blob correctly.
channel.send(JSON.stringify({
name: file.name,
size: file.size,
type: file.type
}));The Backpressure Problem
If you push chunks faster than the network drains them, the send buffer grows and the page can crash. Watch bufferedAmount and pause when it is high.
channel.bufferedAmountLowThreshold = 65536;
if (channel.bufferedAmount > 1 * 1024 * 1024) {
await new Promise(r =>
channel.addEventListener('bufferedamountlow', r, { once: true }));
}Ordered and Reliable Delivery
By default data channels are ordered and reliable (like TCP), which is exactly what file transfer needs.
For files, do not use the unordered/unreliable options that are good for game state. Keep the defaults.
Reassembling on the Receiver
The receiver collects each ArrayBuffer until the total received equals the announced size, then builds a 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);
}
};Showing Progress
Compute a percentage from bytes sent or received versus total size. Update the UI on both ends so users see a live progress bar.
const percent = Math.round((received / meta.size) * 100);Triggering the Download
Turn the finished Blob into a downloadable link using an object 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);
}Reliability and Resume
If a connection drops mid-transfer, you can resume by tracking the last acknowledged offset and restarting from there. Combine this with checksums to verify integrity at the end.
Quick Check
Test your understanding of data channel file transfer.
Recap
P2P file transfer over data channels: send metadata, slice into chunks, respect backpressure, keep ordered/reliable delivery, reassemble into a Blob, and download.
Ucz się Real-Time Streaming Systems (WebRTC + Live Data) dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 12
- Lekcje
- 48
Często zadawane pytania
Czy lekcja „Przesyłanie plików przez kanały danych WebRTC” jest bezpłatna?
Tak — pełny tekst „Przesyłanie plików przez kanały danych WebRTC” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Real-Time Streaming Systems (WebRTC + Live Data), przejdź na CoddyKit PRO. Kurs Real-Time Streaming Systems (WebRTC + Live Data) zawiera 4 lekcji w sumie.
Co nauczysz się w „Przesyłanie plików przez kanały danych WebRTC”?
Naucz się przesyłać pliki peer-to-peer przez kanały danych WebRTC, w tym dzielić je na fragmenty, obsługiwać backpressure i kolejność oraz śledzić postęp. Ćwiczysz Real-Time Streaming Systems (WebRTC + Live Data) z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Real-Time Streaming Systems (WebRTC + Live Data)?
Nie wymagamy żadnego doświadczenia. Real-Time Streaming Systems (WebRTC + Live Data) w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Przesyłanie plików przez kanały danych WebRTC”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Real-Time Streaming Systems (WebRTC + Live Data)?
Tak. Każda lekcja Real-Time Streaming Systems (WebRTC + Live Data) zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Synchronizacja metadanych WebRTC
- Czat w czasie rzeczywistym przez kanały danych
- Udostępnianie stanu aplikacji na żywo
- Przesyłanie plików przez kanały danych WebRTC