O padrão WebRTC também abrange uma API para enviar dados arbitrários sobre um
RTCPeerConnection
. Para isso, chame createDataChannel()
em um objeto RTCPeerConnection
, que retorna um objeto RTCDataChannel
.
const peerConnection = new RTCPeerConnection(configuration);
const dataChannel = peerConnection.createDataChannel();
O peering remoto pode receber canais de dados detectando o evento datachannel
no objeto RTCPeerConnection
. O evento recebido é do tipo
RTCDataChannelEvent
e contém uma propriedade channel
que representa a
RTCDataChannel
conectada entre os peerings.
const peerConnection = new RTCPeerConnection(configuration);
peerConnection.addEventListener('datachannel', event => {
const dataChannel = event.channel;
});
Abrir e fechar eventos
Antes de usar um canal de dados para enviar dados, o cliente precisa aguardar
até que ele seja aberto. Isso é feito ouvindo o evento open
.
Da mesma forma, há um evento close
para quando um dos lados fechar o canal.
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;
});
Mensagens
O envio de uma mensagem em um RTCDataChannel
é feito chamando a função send()
com os dados que queremos enviar. O parâmetro data
dessa função pode ser uma string, um Blob
, um ArrayBuffer
ou um 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);
})
O peer remoto receberá mensagens enviadas em um RTCDataChannel
ouvindo no evento 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';
});