데이터 채널

WebRTC 표준은 또한 단일 DNS 서버를 통해 임의의 데이터를 전송하기 위한 RTCPeerConnection createDataChannel()를 호출하려면 RTCPeerConnection 객체: RTCDataChannel 객체를 반환합니다.

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

원격 피어는 datachannel를 수신 대기하여 데이터 채널을 수신할 수 있습니다. RTCPeerConnection 객체에서 이 이벤트를 처리합니다. 수신된 이벤트는 다음 유형입니다. RTCDataChannelEvent이며 다음을 나타내는 channel 속성을 포함합니다. RTCDataChannel가 피어 간에 연결되었습니다.

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

열기 및 닫기 이벤트

데이터 채널을 사용하여 데이터를 전송할 수 있으려면 먼저 클라이언트가 대기해야 함 열어야 합니다 open 이벤트를 수신 대기하면 됩니다. 마찬가지로 양쪽에서 채널을 닫을 때 발생하는 close 이벤트도 있습니다.

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

메시지

RTCDataChannel에서 메시지를 보내려면 send() 함수를 호출하면 됩니다. 전달할 수 있습니다 이 함수의 data 매개변수는 다음과 같습니다. 문자열, Blob, ArrayBuffer 또는 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);
})

원격 피어는 수신 대기를 통해 RTCDataChannel에서 전송된 메시지를 수신합니다. 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';
});