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