Der WebRTC-Standard deckt auch eine API zum Senden beliebiger Daten über einen RTCPeerConnection
ab. Dazu wird createDataChannel()
für ein RTCPeerConnection
-Objekt aufgerufen, 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 das Ereignis datachannel
im RTCPeerConnection
-Objekt wartet. Das empfangene Ereignis hat den Typ RTCDataChannelEvent
und enthält die Property channel
, die die RTCDataChannel
darstellt, die zwischen den Peers verbunden ist.
const peerConnection = new RTCPeerConnection(configuration);
peerConnection.addEventListener('datachannel', event => {
const dataChannel = event.channel;
});
Termine öffnen und schließen
Bevor ein Datenkanal zum Senden von Daten verwendet werden kann, muss der Client warten, bis er geöffnet wurde. Dazu wird das Ereignis open
überwacht.
Entsprechend tritt ein close
-Ereignis auf, wenn eine der beiden Seiten 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
Wenn Sie eine Nachricht in RTCDataChannel
senden möchten, rufen Sie die Funktion send()
mit den Daten auf, die wir senden möchten. Der Parameter data
für diese Funktion kann entweder ein String, ein Blob
, ein ArrayBuffer
oder ein ArrayBufferView
sein.
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 an ein RTCDataChannel
gesendet werden, indem er das message
-Ereignis abhört.
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';
});