[TOC] ## 創建數據通道 發送方 ``` const peerConnection = new RTCPeerConnection(configuration); const dataChannel = peerConnection.createDataChannel(); ``` 接收方 ``` const peerConnection = new RTCPeerConnection(configuration); peerConnection.addEventListener('datachannel', event => { const dataChannel = event.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; }); ``` ## 留言內容 `send()`函數的`data`參數可以是字符串，`Blob`，`ArrayBuffer`或and`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); }) ``` 接收方 ``` 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'; }); ```