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

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