El estándar WebRTC también cubre una API para enviar datos arbitrarios a través de una RTCPeerConnection
. Esto se hace llamando createDataChannel()
en un RTCPeerConnection
objeto, que devuelve un RTCDataChannel
objeto.
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 un channel
propiedad 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 mediante la escucha de la open
evento. Del mismo modo, hay una close
evento 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 hace llamando a la send()
función con los datos que desea enviar. El data
de parámetros para esta función puede ser una cadena, un Blob
, un ArrayBuffer
o y 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);
})
La distancia entre pares recibirá los mensajes enviados en un RTCDataChannel
escuchando en el message
evento.
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';
});