Canaux de données

La norme WebRTC couvre également une API permettant d'envoyer des données arbitraires RTCPeerConnection Pour ce faire, appelez createDataChannel() sur un RTCPeerConnection, qui renvoie un objet RTCDataChannel.

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

Le pair distant peut recevoir des canaux de données en écoutant datachannel. sur l'objet RTCPeerConnection. L'événement reçu est de type RTCDataChannelEvent et contient une propriété channel qui représente RTCDataChannel connecté entre les pairs.

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

Événements d'ouverture et de fermeture

Avant de pouvoir utiliser un canal de données pour envoyer des données, le client doit attendre jusqu'à ce qu'elle soit ouverte. Pour ce faire, écoutez l'événement open. De même, il y a un événement close lorsque l'un des côtés ferme la chaîne.

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;
});

Messages

L'envoi d'un message sur un RTCDataChannel se fait en appelant la fonction send() avec les données que nous voulons envoyer. Le paramètre data de cette fonction peut être soit une chaîne, un Blob, un ArrayBuffer, soit 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);
})

Le pair distant recevra les messages envoyés sur un RTCDataChannel via l'écoute sur l'événement 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';
});