นอกจากนี้ มาตรฐาน 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';
});