使用WebRTC搭建前端視頻聊天室——數據通道篇

本文翻譯自WebRTC data channels

在兩個瀏覽器中，爲聊天、遊戲、或是文件傳輸等需求發送信息是十分複雜的。通常情況下，我們需要建立一臺服務器來轉發數據，當然規模比較大的情況下，會擴展成多個數據中心。這種情況下很容易出現很高的延遲，同時難以保證數據的私密性。

這些問題可以通過WebRTC提供的RTCDataChannel API來解決，他能直接在點對點之間傳輸數據。這篇文章將介紹如何創建並使用數據通道，並提供了一些網絡上常見的用例

爲了充分理解這篇文章，你可能需要去了解一些RTCPeerConnection API的相關知識，以及STUN，TURN、信道如何工作。強烈推薦Getting Started With WebRTC這篇文章

爲什麼我們需要另外一個數據通道

我們已經有WebSocket、AJAX和服務器發送事件了，爲什麼我們需要另外一個通信信道？WebSocket是全雙工的，但這些技術的設計都是讓瀏覽器與服務器之間進行通信。

RTCDataChannel則是一個完全不同的途徑：
* 它通過RTCPeerConnection API，可以建立點對點互聯。由於不需要中介服務器，中間的“跳數”減少，延遲更低。
* RTCDataChannel使用Stream Control Transmission Protocol(SCTP)協議，允許我們配置傳遞語義：我們可以配置包傳輸的順序並提供重傳時的一些配置。

基於SCTP的支持的RTCDataChannel已經能夠在桌面的Chrome、Opera和Firefox中使用，移動端則有Android支持。

一個警告：信令、STUN和TURN

儘管WebRTC允許點對點的通信，但它依然需要服務器：
* 信令傳輸：建立點對點的連接需要傳輸一些媒體和網絡相關的元數據信息，需要通過服務器
* NAT和防火牆穿透：我們需要通過ICE框架來建立點與點之間的網絡路徑。可以使用STUN服務器（確定雙方的可公開訪問你的IP地址和端口）以及TURN服務器（如果直接連接失敗，就必須數據中繼了）

WebRTC in the real world: STUN, TURN, and signaling 文章詳細介紹了WebRTC如何與這兩種服務器進行交互

功能

RTCDataChannel API支持靈活的數據類型。它的API是模仿WebSocket設計的，並且支持JavaScript中的二進制類型如Blob、ArrayBuffer和ArrayBufferView，另外還支持字符串。這些類型對於文件傳輸和多玩家的遊戲來說意義重大。

以上來自Ilya Grigorik的High Performance Browser Networking

RTCDataChannel在不可靠模式（類似於UDP）或可靠模式（類似於TCP）下都能夠正常工作。但這兩種模式有一些不同：
* 可靠模式：保證消息傳輸一定成功，並保證按序到達。這自然需要一定量的開銷，速度也更慢
* 不可靠模式：不保證消息傳輸一定成功，也不保證按序到達。這消除了那些開銷，速度也更快

在不會丟包的情況下，這兩種模式的效率差不多。然而，可靠模式下，丟包將造成後續的所有包阻塞，丟失的數據包也將重傳直至其成功到達。當然，我們能在同一個應用中使用多個數據通道，每一個有他們自己的可靠性

下面將說明如何去配置可靠模式或不可靠模式的RTCDataChannel

配置數據通道

網上已經有很多RTCDataChannel的例子了：
* simpl.info/dc
* googlechrome.github.io/webrtc/dc1.html(SCTP或者RTP)
* pubnub.github.io/webrtc(兩個PubNub用戶)

ps：PubBub是一個實時信息通訊應用開發公司

在這個例子中，瀏覽器創建了一個對等連接連接到自己。然後在這個對等連接n上創建了一個數據通道，發送了一些消息。最後，消息成功抵達並顯示在頁面上。

var peerConnection = new RTCPeerConnection();

//使用信令傳輸信道創建對等連接
var dataChannel =
  peerConnection.createDataChannel("myLabel", dataChannelOptions);

dataChannel.onerror = function (error) {
  console.log("Data Channel Error:", error);
};

dataChannel.onmessage = function (event) {
  console.log("Got Data Channel Message:", event.data);
};

dataChannel.onopen = function () {
  dataChannel.send("Hello World!");
};

dataChannel.onclose = function () {
  console.log("The Data Channel is Closed");
};

dataChannel對象建立在一個已經創建完畢的對等連接之上。它可以創建在信令傳輸前後。另外，可以賦予一個label來作區分，並提供一系列的配置選項：

var dataChannelOptions = {
  ordered: false, //不保證到達順序
  maxRetransmitTime: 3000, //最大重傳時間
};

我們可以加入一個maxRetransimits選項（最大重傳次數），但maxRetransimitTime或maxRetransimits只能設定一個，不能兩個懂事設定。如果想使用UDP的方式，設定maxRetransmits爲0，ordered爲false。如果想要獲取更多信息，請查看RFC 4960（SCTP）和RFC 3758（SCTP部分可靠性）
* ordered: 數據通道是否保證按序傳輸數據
* maxRetrasmitTime：在信息失敗前的最大重傳時間（強迫進入不可靠模式）
* maxRetransmits：在信息失敗前的最大重傳次數（強迫進入不可靠模式）
* protocol：允許使用一個自協議，但如果協議不支持，將會失敗
* negotiated：如果設爲true，將一處對方的數據通道的自動設置，也就是說，將使用相同的id以自己配置的方式與對方建立數據通道
* id：爲數據通道提供一個自己定義的ID

它安全嗎？

在WebRTC所有的組件中，都會強制進行加密。在RTCDataChannel中，所有的數據都使用數據報傳輸層安全性（DTLS）。DTLS是SSL的衍生，也就是說，你的數據將和使用基於SSL的連接一樣安全。DTLS已經被標準化，並內置於所有支持WebRTC的瀏覽器中。如果需要更多關於DTLS信息，請訪問Wireshark的維基

改變你考慮數據的方式

處理大批量的數據，一直是JavaScript的一個難點。正如Sharefest所提出的觀點，我們需要用一種新的方式來考慮數據。如果你需要傳輸一個比你當前可用內存更大的文件，就必須考慮新的保存信息的方式了。這也就是像FileSystem API等技術存在的意義。我們將在下面進行介紹

搭建一個文件共享應用

現在我們可以通過RTCDataChannel來創建文件共享應用。將應用建立在RTCDataChannel智商也意味着傳輸的文件數據都將加密，而且不會經過應用的服務器端。通過這個功能，我們能夠實現多用戶之間的互聯，進行文件共享。

需要成功傳輸一個文件，我們需要如下幾步：
1. 通過JavaScript的File API讀取文件數據
2. 使用RTCPeerConnection在用戶間創建一個對等連接
3. 使用RTCDataChannel在用戶間創建一個數據通道

在使用RTCDataChannel時，還有一些其他問題需要考慮：
* 文件大小：如果文件很小，能夠直接通過一個Blob進行存儲和讀取，那麼我們可以直接使用File API將其讀進內存，並通過可靠的數據通道發送（但是需要注意的是，瀏覽器有最大傳輸大小的限制）。隨着文件變大的話，就不那麼簡單了。我們需要一個分塊機制：文件將分成多個碎片，稱爲文件塊。我們不再直接發送整個文件，而是一次發送一個文件塊。當然文件塊上會有一些元數據如塊的ID，方便對方能夠識別。接收到文件塊之後，首先將這些文件塊保存在離線存儲中（例如，使用FileSystem API），只有當所有塊都接收完畢，纔將其拼合起來成爲完整的文件，保存到用戶的硬盤。
* 速度：文件傳輸更適合使用可靠模式（像TCP）還是非可靠模式（像UDP）還有待商榷。如果應用知識簡單的一對一文件傳輸，使用不可靠的數據通道將需要設計一定的響應/重傳協議。你必須自己來實現它，就算你非常優秀，它仍然不會比使用可靠的數據傳輸快多少。可靠而無序的數據通道將會更加合適，但是如果是多方文件傳輸，結果可能會有所不同。
* 塊大小：這些是你的應用中的最小的“原子”數據。目前有傳輸大小限制（儘管以後可能不會有限制），所以必須要進行分塊。目前建議的最大塊大小爲16KB。

如果文件已經被完全傳輸，就可以使用一個a標籤提供下載了：

function saveFile(blob) {
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = 'File Name';
  link.click();
};

目前已經有兩個文件共享的應用使用了這種方式：pubnub.github.io/rtc-pubnub-fileshare和github.com/Peer5/ShareFest，這兩個應用都是開源的，並提供了基於RTCDataChannel的文件共享

那麼我們能做什麼？

RTCDataChannel爲文件共享、多人遊戲以及內容交付應用提供了全新的實現思路：
* 上面已經提到了點對點的文件傳輸了
* 多人遊戲，與諸如WebGL等其他技術相結合，比如Mozilla的Banana Bread
* 內容交付：由PeerCDN重新改造的一個用於提供點對點通信提供資源的框架

改變你構建應用的方式

現在我們可使用高新能、低延遲的RTCDataChannel來創建更優秀的應用了。一些框架，諸如PeerJS和PubNub WebRTC SDK，使得RTCDataChannel更加易於使用，其API也被各個平臺所支持

RTCDataChannel所帶來的優勢能夠改變你在瀏覽器中傳輸數據的觀念。

更多資訊

• Getting started with WebRTC
• WebRTC in the real world: STUN, TURN and signaling
• WebRTC resources
• W3C Working Draft
• IETF WebRTC Data Channel Protocol Draft
• How to send a File Using WebRTC Data API
• 7 Creative Uses of WebRTC’s Data Channel
• Banana Bread 3D first person shooter game compiled to JS+WebGL, using WebRTC data channels in multiplayer mode