Canales de datos

El estándar WebRTC también abarca una API para enviar datos arbitrarios a través de un RTCPeerConnection. Para ello, se llama a createDataChannel() en un objeto RTCPeerConnection, que muestra un objeto RTCDataChannel.

const peerConnection = new RTCPeerConnection(configuration);
const dataChannel = peerConnection.createDataChannel();

El par remoto puede recibir canales de datos escuchando el evento datachannel en el objeto RTCPeerConnection. El evento recibido es del tipo RTCDataChannelEvent y contiene una propiedad channel que representa el objeto RTCDataChannel conectado entre pares.

const peerConnection = new RTCPeerConnection(configuration);
peerConnection.addEventListener('datachannel', event => {
    const dataChannel = event.channel;
});

Abrir y cerrar eventos

Antes de que se pueda usar un canal de datos para enviar datos, el cliente debe esperar hasta que se abra. Para ello, se debe escuchar el evento open. Del mismo modo, hay un evento close en el que cada lado 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

Para enviar un mensaje con un RTCDataChannel, se debe llamar a la función send() con los datos que queremos enviar. El parámetro data de esta función puede ser una string, un Blob, un ArrayBuffer o una 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 mediante la escucha del 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';
});