数据通道

WebRTC 标准还涵盖通过 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;
});

消息

通过调用 send() 函数在 RTCDataChannel 上发送消息输入想要发送的数据此函数的 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';
});