谷歌致力于推进种族平等的黑人社区。 怎么看。
此页面由 Cloud Translation API 翻译。
Switch to English

数据通道

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

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

远程对等体可以通过侦听接收数据信道datachannel on事件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';
});