Google 致力于为黑人社区推动种族平等。查看具体行动
此页面由 Cloud Translation API 翻译。
Switch to English

数据通道

WebRTC标准还涵盖了用于通过RTCPeerConnection发送任意数据的API。这是通过在RTCPeerConnection对象上调用createDataChannel()来完成的,该对象将返回RTCDataChannel对象。

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

远程对等方可以通过侦听RTCPeerConnection对象上的datachannel事件来接收数据通道。接收到的事件的类型为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参数可以是字符串, BlobArrayBuffer或and 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);
})
 

远程对等方将通过侦听message事件来接收在RTCDataChannelmessage

 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';
});