Standar WebRTC juga mencakup API untuk mengirim data arbitrer melalui
RTCPeerConnection
. Hal ini dilakukan dengan memanggil createDataChannel()
pada
objek RTCPeerConnection
, yang menampilkan objek RTCDataChannel
.
const peerConnection = new RTCPeerConnection(configuration);
const dataChannel = peerConnection.createDataChannel();
Peer jarak jauh dapat menerima saluran data dengan memproses peristiwa datachannel
pada objek RTCPeerConnection
. Peristiwa yang diterima adalah jenis
RTCDataChannelEvent
dan berisi properti channel
yang mewakili
RTCDataChannel
yang terhubung di antara pembanding.
const peerConnection = new RTCPeerConnection(configuration);
peerConnection.addEventListener('datachannel', event => {
const dataChannel = event.channel;
});
Acara buka dan tutup
Sebelum saluran data dapat digunakan untuk mengirim data, klien harus menunggu hingga saluran tersebut dibuka. Hal ini dilakukan dengan memproses peristiwa open
.
Demikian pula, ada peristiwa close
untuk mengetahui kapan kedua sisi menutup channel.
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;
});
Messages
Mengirim pesan pada RTCDataChannel
dilakukan dengan memanggil fungsi send()
dengan data yang ingin dikirim. Parameter data
untuk fungsi ini dapat berupa string, Blob
, ArrayBuffer
, dan 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);
})
Peer jarak jauh akan menerima pesan yang dikirim pada RTCDataChannel
dengan memproses peristiwa 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';
});