谷歌致力於推進種族平等的黑人社區。 怎麼看。
本頁面由 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';
});