قنوات البيانات

يتناول معيار WebRTC أيضًا واجهة برمجة تطبيقات لإرسال بيانات عشوائية عبر 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';
});