ช่องทางข้อมูล

นอกจากนี้ มาตรฐาน WebRTC ยังครอบคลุม API สำหรับการส่งข้อมูลที่กำหนดเองผ่าน 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 เมื่อทั้ง 2 ฝั่งปิดช่อง

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