介紹 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(localPeer, configuration);
datachannel = localPeer.createDataChannel("my local channel"); // 在RTCPeerConnection中建立RTCDataChannel實例
datachannel.onopen = onChannelStageChange(datachannel); // 當channel.[[ReadyState]] 狀態變為 "open"時觸發open事件
datachannel.onclose = onChannelStageChange(datachannel);

remotePeer = buildPeerConnection(remotePeer, configuration);
remotePeer.ondatachannel = receiveChannelCallback; // 綁定datachannel Event
await communication(localPeer, remotePeer); // build peer-to-peer communication

function receiveChannelCallback(event) {
  console.log("Receive Channel Callback");
  receiveChannel = event.channel; // 接收來自已建立的p2p連線中的Channel
 
  // 將接收到得資料寫進textarea上
  receiveChannel.onmessage = event =>  document.querySelector("textarea#dataChannelReceive").value = event.data;
  
  // 當channel.[[ReadyState]] 狀態變為 "open"時觸發open事件
  receiveChannel.onopen = onChannelStageChange(receiveChannel); 
  receiveChannel.onclose = onChannelStageChange(receiveChannel);
}

receiveChannel 接收來自event(RTCDataChannelEvent)的channel屬性，表示與遠端進行datachannel的連結。

因此當localPeer(發送端)透過send()methods 發送資料時，連結的各個遠端channel就會觸發onmessageEvent，
透過綁定該事件來接收資料。

function send() {
  const data = document.querySelector("textarea#dataChannelSend").value;
  datachannel.send(data); // localPeer的datachannel觸發send()method 傳遞資料(data)
}

經過上面的實作範例後，會發現跟WebSocket功用很像，但相比之下，RTCDataChannel 有低延遲的特性，更適合應用在即時互動遊戲上，
而在真實使用上，也列出幾個網路上查到得應用範例參考參考:

• Google Cube Slam
• ShareFest

總結

本章節了解到:

• WebRTC 如何透過 RTCDataChannel 來傳遞文本資料(text data)

新手入門，如有錯誤，歡迎指正～～～