使用 WebRTC 資料管道在瀏覽器之間傳送資料

Dan Ristic
Dan Ristic
X 首頁
Sam Dutton

在兩個瀏覽器之間傳送資料進行通訊、遊戲或檔案傳輸，可能會是一個相當複雜的程序。還必須設定伺服器並支付費用，才能轉發資料。您或許也要將這個做法擴大至多個資料中心。在這種情況下，延遲時間很短，很難維持資料的私密性。

您可以使用 WebRTC 的 RTCDataChannel API，直接從一個對等端將資料傳輸到另一個對等端，藉此解決這些問題。本文將說明如何設定及使用資料管道的基本概念，以及目前網路上常見的用途。

為何要選用其他資料管道？

我們有 WebSocket、AJAX 和伺服器傳送事件。為什麼需要其他通訊管道？WebSocket 支援雙向查詢，但這些技術都是專門用來與伺服器相互通訊。

RTCDataChannel 則採用不同的做法：

  • 這項 API 可搭配 RTCPeerConnection API 使用，讓裝置可彼此連線。這麼做可縮短延遲時間，因為沒有中介伺服器，且「跳轉」次數也較少。
  • RTCDataChannel 使用串流控制傳輸通訊協定 (SCTP)，允許可設定的傳送語意脫序傳送和重新傳輸設定。

RTCDataChannel 現已支援電腦版和 Android 版 Google Chrome、Opera 和 Firefox 的 SCTP。

警告：信號、STUN 和 TURN

WebRTC 可啟用點對點通訊，但仍需要伺服器進行信號傳送，以交換媒體和網路中繼資料，啟動對等連線。

WebRTC 會透過以下方式處理 NAT 和防火牆：

  • ICE 架構：在對等裝置之間建立最佳網路路徑。
  • STUN 伺服器：用於確認每個對等端的可公開 IP 和通訊埠。
  • 如果直接連線失敗，且需要轉送資料，則使用TURN 伺服器。

如要進一步瞭解 WebRTC 如何與伺服器搭配使用，以便進行信號傳送和網路連線，請參閱「實際應用中的 WebRTC：STUN、TURN 和信號傳送」。

功能

RTCDataChannel API 支援彈性的資料類型組合。這個 API 的設計目的是完全模擬 WebSocket，RTCDataChannel 支援 字串以及 JavaScript 中的部分二進位元類型，例如 Blob、ArrayBuffer 和 ArrayBufferView。在檔案傳輸和多人遊戲時，這類類型會很有幫助。

RTCDataChannel 可在不可靠且無序的模式 (類似於 User Datagram Protocol 或 UDP)、可靠且有序的模式 (類似於 Transmission Control Protocol 或 TCP) 以及部分可靠模式中運作：

  • 可靠且有序的模式可確保訊息傳輸，以及訊息的傳送順序。這會產生額外的負擔，因此可能會讓這個模式的速度變慢。
  • 不穩定、未排序的項目都無法保證所有訊息都會送達另一端或訊息的順序。這麼做可消除額外負擔，讓這個模式的運作速度大幅提升。
  • 部分可靠的模式可確保在特定情況下 (例如重新傳輸逾時或最大重新傳輸量) 下傳送訊息。也可以設定訊息的順序。

在沒有封包遺失的情況下，前兩種模式的效能大致相同。不過，在穩定且經排序的模式下，遺失的封包會導致其他封包被封鎖，而遺失的封包在重新傳輸與送達時可能已過時。當然，您也可以在同一個應用程式中使用多個資料管道，每個管道都有自己的可靠或不可靠語義。

以下是 Ilya Grigorik 撰寫的「High Performance Browser Networking」一文中，有用的表格：

TCPUDPSCTP
可靠性穩定可靠不可靠可自行設定
外送排序依據未排序可自行設定
變速箱以位元組為導向訊息導向訊息導向
流量控制是否是
壅塞控制是否是

接下來，您會學到如何設定 RTCDataChannel，以使用可靠、排序序/不穩定且未排序的模式。

設定資料管道

網路上有幾個簡單的 RTCDataChannel 示範：

在這些範例中，瀏覽器會建立與自身的對等端連線，然後建立資料管道，並透過對等端連線傳送訊息。然後建立資料管道，並透過對等互連連線傳送訊息。最後，您的訊息會顯示在頁面另一側的方塊中！

開始使用的程式碼相當簡短：

const peerConnection = new RTCPeerConnection();

// Establish your peer connection using your signaling channel here
const dataChannel =
  peerConnection.createDataChannel("myLabel", dataChannelOptions);

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

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

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

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

dataChannel 物件是透過已建立的對等端連線建立。可在發出信號之前或之後建立。接著，您可以傳入標籤來區分這個管道與其他管道，以及一組選用設定：

const dataChannelOptions = {
  ordered: false, // do not guarantee order
  maxPacketLifeTime: 3000, // in milliseconds
};

您也可以新增 maxRetransmits 選項 (失敗前重試的次數)，但只能指定 maxRetransmits 或 maxPacketLifeTime，不能同時指定兩者。如為 UDP 語意，請將 maxRetransmits 設為 0，並將 ordered 設為 false。如需更多資訊，請參閱以下 IETF RFC：Stream Control Transmission Protocol 和 Stream Control Transmission Protocol Partial Reliability Extension。

  • ordered：是否應保證資料管道的順序
  • maxPacketLifeTime：嘗試重新傳送失敗訊息的時間上限
  • maxRetransmits：重試傳送失敗訊息的次數上限
  • protocol：允許使用子通訊協定，為應用程式提供元資料
  • negotiated：如果設為 true，系統就會移除在另一個對等端自動設定資料通道的功能，讓您自行在另一端建立同 ID 的資料通道
  • id：可讓你提供頻道專屬 ID，搭配 negotiated 設為 true 時即可使用)

大多數人只需要使用前三個選項：ordered、maxPacketLifeTime 和 maxRetransmits。使用 SCTP (目前已被所有支援 WebRTC 的瀏覽器採用)，可讓可靠且有序的預設值為 True。如果您想從應用程式層完整控制，不妨使用不穩定且未排序的項目。不過，在大多數情況下，部分可靠性會有幫助。

請注意，與 WebSocket 一樣，RTCDataChannel 會在建立、關閉或發生錯誤的連線時，以及在收到來自其他端點的訊息時觸發事件。

這個挑戰安全嗎？

所有 WebRTC 元件都必須加密。使用 RTCDataChannel 時，所有資料都會透過資料包傳輸層安全標準 (DTLS) 加密。DTLS 是 SSL 的衍生產品，因此資料的安全性與使用任何標準 SSL 連線一樣。DTLS 已標準化，並內建於所有支援 WebRTC 的瀏覽器中。詳情請參閱 Wireshark wiki。

改變您對資料的看法

在 JavaScript 中，處理大量資料可能會造成困擾。如同 Sharefest 的開發人員所指出，這需要以全新的方式思考資料。如果傳輸的檔案超過可用記憶體容量，您必須思考要如何儲存這類資訊。這時就需要使用 FileSystem API 等技術，請見下文。

建構檔案分享應用程式

現在可以使用 RTCDataChannel 建立可在瀏覽器中共用檔案的網頁應用程式。在 RTCDataChannel 上建構代表傳輸的檔案資料會經過加密，且不會觸及應用程式供應商的伺服器。這項功能加上可連線至多個用戶端以便加快分享速度的可能性，讓 WebRTC 檔案分享功能成為網頁的強力候選方案。

要成功轉移，需要完成以下幾個步驟：

  1. 使用 File API 在 JavaScript 中讀取檔案。
  2. 使用 RTCPeerConnection 在用戶端之間建立對等連線。
  3. 使用 RTCDataChannel 在用戶端之間建立資料管道。

透過 RTCDataChannel 傳送檔案時，請考量以下幾點：

  • 檔案大小：如果檔案大小相當小，且可儲存及載入為一個 Blob，您可以使用 File API 載入記憶體，然後透過可靠的管道原封不動地傳送檔案 (但請注意，瀏覽器會對傳輸大小上限設限)。檔案大小越大，情況就越複雜。需要使用區塊化機制時，檔案區塊會載入並傳送至另一個對等互連，且帶有 chunkID 中繼資料，讓對等點能識別這些檔案。請注意，在這種情況下，您也需要先將區塊儲存至離線儲存空間 (例如使用 FileSystem API)，並等到檔案完整儲存後再儲存到使用者的磁碟中。
  • 區塊大小：這是應用程式中最小的資料「原子」。目前有傳送大小限制，因此必須進行區塊化 (不過，這項限制會在日後的資料管道版本中修正)。目前建議的區塊大小上限為 64 KiB。

檔案完全轉移至另一端後，即可使用錨點標記下載：

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

這些在 PubShare 和 GitHub 上的檔案共用應用程式都採用這項技術。這兩種工具都是開放原始碼，可以根據 RTCDataChannel 為檔案分享應用程式提供良好的基礎。

那麼，您可以採取哪些行動？

RTCDataChannel 為建構檔案分享、多人遊戲和內容傳遞應用程式的新方法開啟大門。

  • 點對點檔案共用 (如先前所述)
  • 多人遊戲，搭配其他技術 (例如 WebGL)，如 Mozilla 的 BananaBread
  • 內容傳遞服務由 PeerCDN 重新發明，這是一種透過點對點資料通訊傳遞網站資產的架構

變更應用程式的建構方式

您現在可以透過 RTCDataChannel 使用高效能、低延遲的連線，提供更具吸引力的應用程式。架構 (例如 PeerJS 和 PubNub WebRTC SDK) 可讓您輕鬆導入 RTCDataChannel，API 現在也能廣泛支援各種平台。

RTCDataChannel 的推出，可改變您對瀏覽器資料傳輸的看法。

瞭解詳情