ערוצי נתונים

תקן 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 שבו כל אחד מהצדדים סוגר את הערוץ.

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