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