資料管道

WebRTC 標準也涵蓋了透過 API 傳送任意資料的 API RTCPeerConnection。方法是在createDataChannel() RTCPeerConnection 物件，這個物件會傳回 RTCDataChannel 物件。

const peerConnection = new RTCPeerConnection(configuration);
const dataChannel = peerConnection.createDataChannel();

遠端對等節點可以監聽 datachannel 來接收資料管道事件上。RTCPeerConnection收到的事件屬於 RTCDataChannelEvent，其中包含的 channel 屬性代表 RTCDataChannel 個同類應用程式相連。

const peerConnection = new RTCPeerConnection(configuration);
peerConnection.addEventListener('datachannel', event => {
    const dataChannel = event.channel;
});

開啟和關閉活動

用戶端必須先等待用戶端，才能將資料管道用於傳送資料直到打開為止方法是監聽 open 事件。同理，當兩側關閉頻道時，也會發生 close 事件。

const messageBox = document.querySelector('#messageBox');
const sendButton = document.querySelector('#sendButton');
const peerConnection = new RTCPeerConnection(configuration);
const dataChannel = peerConnection.createDataChannel();

// Enable textarea and button when opened
dataChannel.addEventListener('open', event => {
    messageBox.disabled = false;
    messageBox.focus();
    sendButton.disabled = false;
});

// Disable input when closed
dataChannel.addEventListener('close', event => {
    messageBox.disabled = false;
    sendButton.disabled = false;
});

訊息

在 RTCDataChannel 上傳送訊息，是透過呼叫 send() 函式來完成要求傳送的資料這個函式的 data 參數可以是字串、Blob、ArrayBuffer 或 ArrayBufferView。

const messageBox = document.querySelector('#messageBox');
const sendButton = document.querySelector('#sendButton');

// Send a simple text message when we click the button
sendButton.addEventListener('click', event => {
    const message = messageBox.textContent;
    dataChannel.send(message);
})

遠端對等裝置會監聽以下通知，以便接收透過 RTCDataChannel 傳送的訊息： message 事件。

const incomingMessages = document.querySelector('#incomingMessages');

const peerConnection = new RTCPeerConnection(configuration);
const dataChannel = peerConnection.createDataChannel();

// Append new messages to the box of incoming messages
dataChannel.addEventListener('message', event => {
    const message = event.data;
    incomingMessages.textContent += message + '\n';
});