Tiêu chuẩn WebRTC cũng bao gồm một API để gửi dữ liệu tùy ý qua
RTCPeerConnection
. Bạn có thể thực hiện việc này bằng cách gọi createDataChannel()
trên đối tượng
RTCPeerConnection
. Các đối tượng này sẽ trả về đối tượng RTCDataChannel
.
const peerConnection = new RTCPeerConnection(configuration);
const dataChannel = peerConnection.createDataChannel();
Ứng dụng ngang hàng từ xa có thể nhận kênh dữ liệu bằng cách theo dõi sự kiện datachannel
trên đối tượng RTCPeerConnection
. Sự kiện nhận được thuộc loại
RTCDataChannelEvent
và chứa một thuộc tính channel
đại diện cho
RTCDataChannel
kết nối giữa các ứng dụng ngang hàng.
const peerConnection = new RTCPeerConnection(configuration);
peerConnection.addEventListener('datachannel', event => {
const dataChannel = event.channel;
});
Mở và đóng sự kiện
Trước khi có thể sử dụng kênh dữ liệu để gửi dữ liệu, khách hàng cần phải đợi
cho đến khi kênh được mở. Bạn có thể thực hiện việc này bằng cách nghe sự kiện open
.
Tương tự như vậy, có một sự kiện close
sẽ xuất hiện khi một trong hai bên đóng kênh.
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;
});
Tin nhắn
Việc gửi tin nhắn trên RTCDataChannel
được thực hiện bằng cách gọi hàm send()
với dữ liệu mà chúng tôi muốn gửi. Thông số data
cho hàm này có thể
là một chuỗi, Blob
, ArrayBuffer
hoặc 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);
})
Ứng dụng ngang hàng từ xa sẽ nhận được tin nhắn gửi qua RTCDataChannel
bằng cách theo dõi sự kiện 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';
});