Каналы данных

Стандарт WebRTC также охватывает API для отправки произвольных данных через 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;
});

Сообщения

Отправка сообщения по 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';
});