Стандарт WebRTC также охватывает API для отправки произвольных данных через RTCPeerConnection
. Это делается путем вызова createDataChannel()
для объекта RTCPeerConnection
, который возвращает объект 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;
});
Сообщения
Отправка сообщения в 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';
});