WebRTC Veri Kanalları Üzerinden Dosya Aktarımı
Parçalara bölme, geri basınç, sıralama ve ilerleme takibi dahil olmak üzere dosyaları WebRTC veri kanalları üzerinden eşler arasında göndermeyi öğrenin.
WebRTC Veri Kanalları Üzerinden Dosya Aktarımı, CoddyKit'te ücretsiz bir Real-Time Streaming Systems (WebRTC + Live Data) dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Real-Time Streaming Systems (WebRTC + Live Data) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Real-Time Streaming Systems (WebRTC + Live Data) kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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.
Sıkça Sorulan Sorular
“WebRTC Veri Kanalları Üzerinden Dosya Aktarımı” dersi ücretsiz mi?
Evet — “WebRTC Veri Kanalları Üzerinden Dosya Aktarımı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Real-Time Streaming Systems (WebRTC + Live Data) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Real-Time Streaming Systems (WebRTC + Live Data) kursu toplamda 4 dersten oluşur.
“WebRTC Veri Kanalları Üzerinden Dosya Aktarımı” dersinde ne öğreneceğim?
Parçalara bölme, geri basınç, sıralama ve ilerleme takibi dahil olmak üzere dosyaları WebRTC veri kanalları üzerinden eşler arasında göndermeyi öğrenin. Real-Time Streaming Systems (WebRTC + Live Data) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Real-Time Streaming Systems (WebRTC + Live Data) öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Real-Time Streaming Systems (WebRTC + Live Data), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“WebRTC Veri Kanalları Üzerinden Dosya Aktarımı” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Real-Time Streaming Systems (WebRTC + Live Data) dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Real-Time Streaming Systems (WebRTC + Live Data) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- WebRTC Üst Verilerini Eşzamanlı Tutma
- Veri Kanalları Üzerinden Gerçek Zamanlı Sohbet
- Uygulama Durumunu Canlı Paylaşma
- WebRTC Veri Kanalları Üzerinden Dosya Aktarımı