#介紹 PeerJS,WebRTC 庫
使用 WebRTC 可能會很困難。PeerJS 是一個很棒的庫,讓 WebRTC 變得更容易。
我寫過一篇關於 WebRTC 的文章。那篇文章描述了使用該協議使兩個網頁瀏覽器直接通信的細節。
在那篇教程中,我提到了一些抽象了許多細節的庫,以實現 WebRTC 通信。
其中一個庫就是 PeerJS,它使實時通信變得非常簡單。
首先,您需要一個後端,讓兩個客戶端在能夠直接通信之前進行同步。
在一個文件夾中,使用 npm init
初始化一個 npm 項目,使用 npm install peerjs
安裝 PeerJS,然後使用 npx
運行:
npx peerjs --port 9000
(運行 npx peerjs --help
查看所有可用的選項)。
這就是您的後端 🙂
現在,我們可以創建一個非常簡單的應用程序並發揮一些作用。我們有一個接收器和一個發送器。
首先,我們創建接收器,它連接到我們的 PeerJS 服務器,並監聽接收到的數據。new Peer()
的第一個參數是我們的同行名稱,我們稱其為 receiver
:
包含 PeerJS 客戶端(使用最新可用的庫版本更改):
<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js"></script>
然後,我們初始化 Peer
對象。connection
事件在另一個同行連接到我們時被調用。收到數據後,將調用 data
事件並傳入數據:
const peer = new Peer('receiver', { host: 'localhost', port: 9000, path: '/' })
peer.on('connection', (conn) => {
conn.on('data', (data) => {
console.log(data);
})
})
現在來創建通信的另一端。我們將其稱為 sender
,因為它將連接並向接收器發送消息。
我們初始化 Peer
對象,然後要求對等方連接到先前註冊的 receiver
對等方。一旦連接建立,open
事件觸發,我們就可以調用連接上的 send()
方法將數據發送到另一端:
const peer = new Peer('sender', { host: 'localhost', port: 9000, path: '/' })
const conn = peer.connect('receiver')
conn.on('open', () => {
conn.send('hi!')
})
這是最基本的例子。
首先打開接收器頁面,然後打開發送器頁面。接收器直接從發送器獲取消息,而不是從集中式資源中獲取。服務器部分只需用於交換信息,使兩個部分可以連接。之後,它不再干擾。