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