Saluran data

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';
});