# [實作篇]WebRTC APIs - RTCDataChannel - transfer text data
介紹 WebRTC APIs 三大核心之一 RTCDataChannel
# 學習目標
- 運用 RTCDataChannel 在 peers 間傳遞資料
同樣先實作個簡單應用來當作入門,試試水溫。
# RTCDataChannel 簡介
RTCDataChannel
主要負責在 peer-to-peer 間建立傳輸資料的通道,比如彼此傳輸文件檔案或照片...等等二進制資源(Binary Object)。
這邊列舉出幾項優點:
- Same API as WebSockets : 有著與 WebSocket 相同的接口(ex: send() methods)。
- Ultra-low latency : 低延遲性。
- Unreliable or reliable : 可以分別使用可靠性傳輸(類似TCP 協定)及不可靠性傳輸(類似UDP 協定)
- Secure : 使用(DTLS)傳輸協定所帶來的安全性。
# 實作
利用 RTCDataChannel 實作簡單雙向消息(text messages)傳遞
先附上完整程式碼
# HTML
這次html模板:
<h1>Use RTCDataChannel to exchange data</h1>
<div id="container">
<textarea id="dataChannelSend" disabled placeholder="Press Start, enter some text, then press Send."></textarea>
<textarea id="dataChannelReceive" disabled></textarea>
<div id="buttons">
<button id="startButton">Start</button>
<button id="sendButton">Send</button>
<button id="closeButton">Stop</button>
</div>
</div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="./js/main.js" async></script>
# 功能
- 引用先前範例,一樣要先用
RTCPeerConnection
建立起兩端點的連線溝通, 並在localPeer(發起端)透過createDataChannel()
建立RTCDataChannel實例。
const configuration = null;
localPeer = buildPeerConnection(configuration);
datachannel = localPeer.createDataChannel("my local channel"); // 在RTCPeerConnection中建立RTCDataChannel實例
datachannel.onopen = /** 略.. */; // 當channel.[[ReadyState]] 狀態變為 "open"時觸發open事件
datachannel.onclose = /** 略.. */;
remotePeer = buildPeerConnection(configuration);
remotePeer.ondatachannel = receiveChannelCallback; // 綁定datachannel Event
await communication(localPeer, remotePeer); // SDP offer/answer process 建立連線
function receiveChannelCallback(event) {
console.log("Receive Channel Callback");
receiveChannel = event.channel; // 接收來自已建立的p2p連線中的Channel
receiveChannel.onmessage = event => document.querySelector("textarea#dataChannelReceive").value = event.data; // 將接收到得資料寫進textarea上
receiveChannel.onopen = /** 略.. */; // 當channel.[[ReadyState]] 狀態變為 "open"時觸發open事件
receiveChannel.onclose = /** 略.. */;
}
receiveChannel
接收來自event(RTCDataChannelEvent
)的channel
屬性,表示與遠端進行datachannel的連結。
因此當localPeer(發送端)透過send()
methods 發送資料時,連結的各個遠端channel就會觸發onmessage
Event,
透過綁定該事件來接收資料。
function send() {
const data = document.querySelector("textarea#dataChannelSend").value;
datachannel.send(data); // localPeer的datachannel觸發send()method 傳遞資料(data)
}
經過上面的實作範例後,會發現跟WebSocket功用很像,但相比之下,RTCDataChannel 有低延遲的特性,更適合應用在即時互動遊戲上, 而在真實使用上,也列出幾個網路上查到得應用範例參考參考:
# 總結
本章節了解到:
- WebRTC 如何透過 RTCDataChannel 來傳遞文本資料(text data)