iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 15
0
Software Development

菜雞前端邁入網頁即時通訊(WebRTC)之旅系列 第 15

[實作篇]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(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 有低延遲的特性,更適合應用在即時互動遊戲上,
而在真實使用上,也列出幾個網路上查到得應用範例參考參考:

總結

本章節了解到:

  • WebRTC 如何透過 RTCDataChannel 來傳遞文本資料(text data)
新手入門,如有錯誤,歡迎指正~~~

上一篇
[知識篇]WebRTC - Session Description Protocol (SDP)
下一篇
[知識篇]WebRTC APIs - RTCDataChannel (屬性及事件)
系列文
菜雞前端邁入網頁即時通訊(WebRTC)之旅30

尚未有邦友留言

立即登入留言