Google is committed to advancing racial equity for Black communities. See how.
Cette page a été traduite par l'API Cloud Translation.
Switch to English

Canaux de données

La norme WebRTC couvre également une API pour l'envoi de données arbitraires via une RTCPeerConnection . Cela se fait en appelant createDataChannel() sur un objet RTCPeerConnection , qui renvoie un objet RTCDataChannel .

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

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

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

Ouvrir et fermer des événements

Avant qu'un canal de données puisse être utilisé pour l'envoi de données, le client doit attendre qu'il soit ouvert. Cela se fait en écoutant l'événement open . De même, il y a un événement de close lorsque l'un des côtés ferme le 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;
});
 

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 de data pour cette fonction peut être une chaîne, un Blob , un ArrayBuffer ou et 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 de 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';
});