使用WebRTC搭建前端視訊交談室——資料通道篇

標籤：android   console   .com   頁面   targe   地址   its   androi   字串   

轉自 使用WebRTC搭建前端視訊交談室——資料通道篇

 

 

 

在兩個瀏覽器中，為聊天、遊戲、或是檔案傳輸等需求發送資訊是十分複雜的。通常情況下，我們需要建立一台伺服器來轉寄資料，當然規模比較大的情況下，會擴充成多個資料中心。這種情況下很容易出現很高的延遲，同時難以保證資料的私密性。

這些問題可以通過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

• 2014年10月21日發布

  

使用WebRTC搭建前端視訊交談室——資料通道篇