يتناول معيار 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';
});