Canaux de données

La norme WebRTC couvre également une API permettant d'envoyer des données arbitraires sur une propriété RTCPeerConnection. Pour ce faire, appelez createDataChannel() sur un objet 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 écouteant l'événement datachannel sur l'objet RTCPeerConnection. L'événement reçu est du type RTCDataChannelEvent et contient une propriété channel qui représente le 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 qu'il soit ouvert. Pour ce faire, il vous suffit d'écouter l'événement open. De même, il existe un événement close lorsque l'un des deux 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

Pour envoyer un message sur un RTCDataChannel, il faut appeler la fonction send() avec les données que nous souhaitons envoyer. Le paramètre data de cette fonction peut être une chaîne, un Blob, une ArrayBuffer ou une 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 en écoutant 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';
});