Real-Time Streaming Systems (WebRTC + Live Data) · บทเรียน

การถ่ายโอนไฟล์ผ่านช่องทางข้อมูล WebRTC

เรียนรู้การส่งไฟล์ระหว่างเพียร์ผ่านช่องทางข้อมูล WebRTC รวมถึงการแบ่งเป็นส่วน การจัดการแรงดันย้อนกลับ การจัดลำดับ และการติดตามความคืบหน้า

บทเรียน 4 จาก 413 ขั้นตอน

การถ่ายโอนไฟล์ผ่านช่องทางข้อมูล WebRTC เป็นบทเรียน Real-Time Streaming Systems (WebRTC + Live Data) ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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) ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 12
บทเรียน: 48

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การถ่ายโอนไฟล์ผ่านช่องทางข้อมูล WebRTC” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การถ่ายโอนไฟล์ผ่านช่องทางข้อมูล WebRTC” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Real-Time Streaming Systems (WebRTC + Live Data)