WebRTC standardı, RTCPeerConnection
üzerinde rastgele veri gönderme API'sini de kapsar. Bu işlem, RTCDataChannel
nesnesi döndüren RTCPeerConnection
nesnesinde createDataChannel()
çağrısı yapılarak gerçekleştirilir.
const peerConnection = new RTCPeerConnection(configuration);
const dataChannel = peerConnection.createDataChannel();
Uzak eş, RTCPeerConnection
nesnesinde datachannel
etkinliğini dinleyerek veri kanallarını alabilir. Alınan etkinlik, RTCDataChannelEvent
türündedir ve benzerler arasında bağlı RTCDataChannel
öğesini temsil eden bir channel
özelliği içerir.
const peerConnection = new RTCPeerConnection(configuration);
peerConnection.addEventListener('datachannel', event => {
const dataChannel = event.channel;
});
Etkinlikleri açma ve kapatma
Bir veri kanalının veri göndermek için kullanılabilmesi için önce istemcinin açılana kadar beklemesi gerekir. Bu işlem, open
etkinliği dinlenerek yapılır.
Benzer şekilde, iki taraf da kanalı kapattığında close
etkinliği gerçekleşir.
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;
});
Mesajlar
RTCDataChannel
üzerinde mesaj göndermek için, göndermek istediğimiz verilerle birlikte send()
işlevini çağırmamız gerekir. Bu işlev için data
parametresi bir dize, Blob
, ArrayBuffer
veya ArrayBufferView
olabilir.
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);
})
Uzaktaki eş, message
etkinliğini dinleyerek RTCDataChannel
üzerinde gönderilen mesajları alır.
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';
});