Datenkanäle

Der WebRTC-Standard umfasst auch eine API zum Senden beliebiger Daten über ein RTCPeerConnection Dazu wird createDataChannel() auf einer RTCPeerConnection-Objekt, das ein RTCDataChannel-Objekt zurückgibt.

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

Der Remote-Peer kann Datenkanäle empfangen, indem er auf den datachannel wartet. für das RTCPeerConnection-Objekt. Das empfangene Ereignis hat den Typ RTCDataChannelEvent und enthält eine channel-Eigenschaft, die den RTCDataChannel zwischen den Peers verbunden.

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

Öffnen- und Schließen-Ereignisse

Bevor ein Datenkanal zum Senden von Daten verwendet werden kann, muss der Client warten bis es geöffnet wird. Dazu wird das Ereignis open überwacht. Ebenso tritt ein close-Ereignis auf, 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;
});

Nachrichten

Zum Senden einer Nachricht über eine RTCDataChannel wird die Funktion send() aufgerufen mit den Daten, die wir senden möchten. Der data-Parameter für diese Funktion kann entweder ein String, ein Blob, ein ArrayBuffer oder 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 erhält Nachrichten, die auf einem RTCDataChannel gesendet werden, indem er auf Das message-Ereignis.

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