摘要:最后,消息成功抵達并顯示在頁面上。在中,所有的數據都使用數據報傳輸層安全性。如果應用知識簡單的一對一文件傳輸,使用不可靠的數據通道將需要設計一定的響應重傳協議。目前建議的最大塊大小為。
本文翻譯自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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/85355.html
摘要:如果對和不太了解的同學,可以先閱讀如下文章的使用搭建前端視頻聊天室信令篇使用搭建前端視頻聊天室入門篇老劉和老姚當然服務器完全不參與其中,顯然是不可能的,用戶需要通過服務器上存儲的信息,才能確定需要和誰建立連接。 WebRTC給我們帶來了瀏覽器中的視頻、音頻聊天體驗。但個人認為,它最實用的特性莫過于DataChannel——在瀏覽器之間建立一個點對點的數據通道。在DataChannel之...
摘要:在處于使用了設備的私有網絡中的主機之間需要建立連接時需要使用穿越技術。目前已經有很多穿越技術,但沒有一項是完美的,因為的行為是非標準化的。 什么是WebRTC? 眾所周知,瀏覽器本身不支持相互之間直接建立信道進行通信,都是通過服務器進行中轉。比如現在有兩個客戶端,甲和乙,他們倆想要通信,首先需要甲和服務器、乙和服務器之間建立信道。甲給乙發送消息時,甲先將消息發送到服務器上,服務器對甲...
摘要:使用能使得狀態被保存在服務器上會話描述協議將客戶端之間傳遞的信令分為兩種信令和信令。他們主要內容的格式都遵循會話描述協議,簡稱。 博客原文地址 建議看這篇之前先看一下使用WebRTC搭建前端視頻聊天室——入門篇 如果需要搭建實例的話可以參照SkyRTC-demo:github地址 其中使用了兩個庫:SkyRTC(github地址)和SkyRTC-client(github地址) ...
摘要:為了使連接起作用,對等方必須獲取元數據的本地媒體條件例如,分辨率和編解碼器功能,并收集應用程序主機的可能網絡地址,用于來回傳遞這些關鍵信息的信令機制并未內置到中。所有特定于多媒體的元數據都使用協議傳遞。 這是專門探索 JavaScript 及其所構建的組件的系列文章的第 18 篇。 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你! 如果你錯過了前面的章節,可以在這里...
摘要:官方資料官網儲備知識工具,推薦資料,使用方法,使用方法或基礎,推薦資料如下,官方資料項目沒用到,借鑒了的強類型,通過進行驗證核心,強烈推薦,推薦資料和需要多理解,項目的核心思想,推薦資料的使用搭建前端視頻聊天室信令篇使用搭建前端視頻聊天室入 官方資料 官網git 儲備知識 工具 Webpack,推薦資料webpack Babel,使用方法babel Flow,使用方法flow ...
閱讀 2933·2023-04-26 02:22
閱讀 2291·2021-11-17 09:33
閱讀 3138·2021-09-22 16:06
閱讀 1078·2021-09-22 15:54
閱讀 3539·2019-08-29 13:44
閱讀 1917·2019-08-29 12:37
閱讀 1323·2019-08-26 14:04
閱讀 1917·2019-08-26 11:57