#介紹 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!')
})

這是最基本的例子。

首先打開接收器頁面,然後打開發送器頁面。接收器直接從發送器獲取消息,而不是從集中式資源中獲取。服務器部分只需用於交換信息,使兩個部分可以連接。之後,它不再干擾。