El estándar WebRTC también cubre una API para enviar datos arbitrarios a través de una RTCPeerConnection
. Esto se hace llamando a createDataChannel()
en un objeto RTCPeerConnection
, que devuelve un objeto RTCDataChannel
.
const peerConnection = new RTCPeerConnection(configuration);
const dataChannel = peerConnection.createDataChannel();
El par remoto puede recibir canales de datos por la escucha de la datachannel
evento en el RTCPeerConnection
objeto. El evento recibido es del tipo RTCDataChannelEvent
y contiene una propiedad de channel
que representa el RTCDataChannel
conectado entre los pares.
const peerConnection = new RTCPeerConnection(configuration);
peerConnection.addEventListener('datachannel', event => {
const dataChannel = event.channel;
});
Eventos abiertos y cerrados
Antes de que se pueda utilizar un canal de datos para enviar datos, el cliente debe esperar hasta que se abra. Esto se hace escuchando el evento open
. Asimismo, hay un evento de close
para cuando cualquiera de los lados cierra el 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;
});
Mensajes
El envío de un mensaje en un RTCDataChannel
se realiza llamando a la función send()
con los datos que queremos enviar. El parámetro de data
para esta función puede ser una cadena, un Blob
, un ArrayBuffer
o un 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);
})
El par remoto recibirá mensajes enviados en un RTCDataChannel
escuchando el evento de 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';
});