WebRTC 實戰 (5) —— Data Channel：不長是傳影音
很多人誤以為 WebRTC 只能用來視訊或通話。其實，它還隱藏了一個極其強大的武器：RTCDataChannel。它允許你在兩台電腦之間建立一個極低延遲、高吞吐量的數據通道。
一、 核心概念：SCTP 傳輸
Data Channel 建立在 SCTP (Stream Control Transmission Protocol) 之上：
- 可靠傳輸 (Reliable)：保證資料不掉包且順序正確（適合傳檔案）。
- 非可靠傳輸 (Unreliable)：追求極限延遲（適合傳遊戲位置）。
二、 實作：建立數據通道
Data Channel 的建立必須依附於 RTCPeerConnection，且通常是在 Offer 發起端建立。
1. 發起端 (Offerer)
javascript
const pc = new RTCPeerConnection();
const dc = pc.createDataChannel("chat-room", {
ordered: true,
maxRetransmits: 3
});
dc.onopen = () => console.log("通道已開啟！");
dc.onmessage = (event) => console.log("收到訊息:", event.data);
dc.send("Hello WebRTC!");2. 接收端 (Answerer)
接收端監聽 ondatachannel 事件：
javascript
pc.ondatachannel = (event) => {
const receiveChannel = event.channel;
receiveChannel.onmessage = (e) => console.log("接收端收到:", e.data);
};三、 應用場景
- 即時通訊：取代 WebSocket，實現真正的 P2P 聊天，保護隱私且減輕伺服器壓力。
- 多人遊戲：利用「非可靠傳輸」同步玩家座標，獲得極低延遲。
- P2P 檔案共享：完全不需要伺服器中轉檔案。
總結
今天我們解鎖了 WebRTC 的半壁江山：RTCDataChannel。它可以平衡可靠性與速度，是開發高性能 P2P 應用的關鍵。
下一篇，我們將進入第二階段：討論如何利用成熟的框架 PeerJS 來優化這一切。
️ 進階挑戰
試著實作一個「P2P 檔案傳輸進度條」。你需要發送方定期發送「目前已發送 Chunk 數量」的資訊，而接收方則根據總檔案大小更新 UI。別忘了在傳送完畢後，正確合併所有的 ArrayBuffer 並觸發下載！
延伸閱讀與資源
- MDN: RTCDataChannel API
- WebRTC Samples: Transmit text and files