Kanały danych

Standard WebRTC obejmuje również interfejs API do wysyłania dowolnych danych przez RTCPeerConnection . Odbywa się to poprzez wywołanie funkcji createDataChannel() na obiekcie RTCPeerConnection , który zwraca obiekt RTCDataChannel .

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

Zdalny datachannel może odbierać kanały danych, nasłuchując zdarzenia RTCPeerConnection obiekcie RTCPeerConnection . Odebrane zdarzenie jest typu RTCDataChannelEvent i zawiera właściwość channel która reprezentuje RTCDataChannel połączony między RTCDataChannel .

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

Otwórz i zamknij wydarzenia

Zanim kanał danych będzie mógł zostać użyty do wysyłania danych, klient musi poczekać, aż zostanie otwarty. Odbywa się to poprzez słuchanie open wydarzenia. Podobnie ma miejsce zdarzenie close , gdy którakolwiek ze stron zamyka kanał.

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

Wiadomości

Wysłanie wiadomości na RTCDataChannel odbywa się poprzez wywołanie funkcji send() z danymi, które chcemy wysłać. Parametr data dla tej funkcji może być ciągiem, obiektem Blob , ArrayBuffer lub i 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);
})
 

Zdalny peer otrzyma komunikaty wysłane w RTCDataChannel przez nasłuchiwanie zdarzenia 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';
});