ערוצי נתונים

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