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

يغطي معيار 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';
});