Transferência de Arquivos por Canais de Dados WebRTC
Aprenda a enviar arquivos ponto a ponto por canais de dados WebRTC, incluindo fragmentação, contrapressão, ordenação e acompanhamento do progresso.
Transferência de Arquivos por Canais de Dados WebRTC é uma aula grátis de Real-Time Streaming Systems (WebRTC + Live Data) no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Real-Time Streaming Systems (WebRTC + Live Data), e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Real-Time Streaming Systems (WebRTC + Live Data) inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
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.
Aprenda Real-Time Streaming Systems (WebRTC + Live Data) com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 12
- Aulas
- 48
Perguntas Frequentes
A aula “Transferência de Arquivos por Canais de Dados WebRTC” é grátis?
Sim — o texto completo de “Transferência de Arquivos por Canais de Dados WebRTC” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Real-Time Streaming Systems (WebRTC + Live Data), atualize para CoddyKit PRO. O curso de Real-Time Streaming Systems (WebRTC + Live Data) inclui 4 aulas no total.
O que vou aprender em “Transferência de Arquivos por Canais de Dados WebRTC”?
Aprenda a enviar arquivos ponto a ponto por canais de dados WebRTC, incluindo fragmentação, contrapressão, ordenação e acompanhamento do progresso. Você pratica Real-Time Streaming Systems (WebRTC + Live Data) com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Real-Time Streaming Systems (WebRTC + Live Data)?
Nenhuma experiência prévia é necessária. Real-Time Streaming Systems (WebRTC + Live Data) no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Transferência de Arquivos por Canais de Dados WebRTC”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Real-Time Streaming Systems (WebRTC + Live Data)?
Sim. Cada aula de Real-Time Streaming Systems (WebRTC + Live Data) inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Sincronização de metadados do WebRTC
- Bate-papo em tempo real por canais de dados
- Compartilhamento do estado da aplicação em tempo real
- Transferência de Arquivos por Canais de Dados WebRTC