תקן WebRTC כולל גם API לשליחת נתונים שרירותיים באמצעות
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';
});