Real-Time Streaming Systems (WebRTC + Live Data) · درس

نقل الملفات عبر قنوات بيانات WebRTC

تعلّم كيفية إرسال الملفات من نظير إلى نظير عبر قنوات بيانات WebRTC، بما في ذلك التقسيم إلى أجزاء، والضغط العكسي، والترتيب، وتتبع التقدم.

الدرس 4 من 413 خطوة

نقل الملفات عبر قنوات بيانات 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.

البدء مجانًا

تعلم Real-Time Streaming Systems (WebRTC + Live Data) مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 12
الدروس: 48

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «نقل الملفات عبر قنوات بيانات 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) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Real-Time Streaming Systems (WebRTC + Live Data)