Передача файлов через каналы данных WebRTC
Научитесь отправлять файлы между узлами через каналы данных WebRTC, включая разбиение на части, обратное давление, порядок доставки и отслеживание прогресса.
«Передача файлов через каналы данных WebRTC» — бесплатный урок Real-Time Streaming Systems (WebRTC + Live Data) на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Real-Time Streaming Systems (WebRTC + Live Data), и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Real-Time Streaming Systems (WebRTC + Live Data) содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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.
Часто задаваемые вопросы
Урок «Передача файлов через каналы данных WebRTC» бесплатный?
Да — полный текст урока «Передача файлов через каналы данных WebRTC» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Real-Time Streaming Systems (WebRTC + Live Data), подпишись на CoddyKit PRO. Курс Real-Time Streaming Systems (WebRTC + Live Data) содержит 4 уроков всего.
Чему я научусь в уроке «Передача файлов через каналы данных WebRTC»?
Научитесь отправлять файлы между узлами через каналы данных WebRTC, включая разбиение на части, обратное давление, порядок доставки и отслеживание прогресса. Ты практикуешь Real-Time Streaming Systems (WebRTC + Live Data) с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Real-Time Streaming Systems (WebRTC + Live Data)?
Предыдущий опыт не требуется. Real-Time Streaming Systems (WebRTC + Live Data) на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Передача файлов через каналы данных WebRTC»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Real-Time Streaming Systems (WebRTC + Live Data)?
Да. Каждый урок Real-Time Streaming Systems (WebRTC + Live Data) включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Синхронизация метаданных WebRTC
- Чат в реальном времени через каналы данных
- Совместное использование состояния приложения в реальном времени
- Передача файлов через каналы данных WebRTC