Tiêu chuẩn WebRTC cũng bao gồm API để gửi dữ liệu tuỳ ý 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
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 các kênh dữ liệu bằng cách lắng nghe datachannel
sự kiện trên đối tượng RTCPeerConnection
. Sự kiện đã nhận thuộc loại
RTCDataChannelEvent
và chứa một thuộc tính channel
đại diện cho
RTCDataChannel
được 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 một kênh dữ liệu để gửi dữ liệu, ứng dụng cần phải đợi
cho đến khi mở thẻ. Bạn có thể thực hiện việc này bằng cách theo dõi sự kiện open
.
Tương tự, có một sự kiện close
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 hoàn tất bằng cách gọi hàm send()
dữ liệu chúng tôi muốn gửi. Tham số data
cho hàm này có thể là
có thể là 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 tin nhắn được gửi trên RTCDataChannel
bằng cách nghe trên
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';
});