Canales de datos

El estándar WebRTC también cubre una API para enviar datos arbitrarios a través de RTCPeerConnection . Esto se realiza 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 usar un canal de datos para enviar datos, el cliente debe esperar hasta que se haya abierto. Esto se hace escuchando el evento open . Del mismo modo, hay un evento 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 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 al escuchar el evento del 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';
});