Datenkanäle

Der WebRTC-Standard umfasst auch eine API zum Senden beliebiger Daten über eine RTCPeerConnection . Dies erfolgt durch Aufrufen von createDataChannel() für ein RTCPeerConnection Objekt, das ein RTCDataChannel Objekt RTCDataChannel .

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

Der Remote-Peer kann Datenkanäle empfangen, indem er auf das datachannel im RTCPeerConnection Objekt RTCPeerConnection . Das empfangene Ereignis ist von dem Typ RTCDataChannelEvent und enthält eine channel Eigenschaft , dass die repräsentiert RTCDataChannel zwischen den Peers.

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

Ereignisse öffnen und schließen

Bevor ein Datenkanal zum Senden von Daten verwendet werden kann, muss der Client warten, bis er geöffnet wurde. Dies geschieht durch Abhören des open Ereignisses. Ebenso gibt es ein close , wenn eine Seite den Kanal schließt.

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

Mitteilungen

Das Senden einer Nachricht auf einem RTCDataChannel erfolgt durch Aufrufen der Funktion send() mit den Daten, die RTCDataChannel . Der data - Parameter für diese Funktion kann entweder eine Zeichenfolge, eine sein Blob , ein ArrayBuffer oder und 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);
})
 

Der Remote-Peer empfängt Nachrichten, die auf einem RTCDataChannel indem er das message RTCDataChannel .

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