/

peerjs

#介紹 PeerJS，WebRTC 庫

使用 WebRTC 可能會很困難。PeerJS 是一個很棒的庫，讓 WebRTC 變得更容易。

我寫過一篇關於 WebRTC 的文章。那篇文章描述了使用該協議使兩個網頁瀏覽器直接通信的細節。

在那篇教程中，我提到了一些抽象了許多細節的庫，以實現 WebRTC 通信。

其中一個庫就是 PeerJS，它使實時通信變得非常簡單。

首先，您需要一個後端，讓兩個客戶端在能夠直接通信之前進行同步。
在一個文件夾中，使用 npm init 初始化一個 npm 項目，使用 npm install peerjs 安裝 PeerJS，然後使用 npx 運行：

1
npx peerjs --port 9000

（運行 npx peerjs --help 查看所有可用的選項）。

這就是您的後端 🙂

現在，我們可以創建一個非常簡單的應用程序並發揮一些作用。我們有一個接收器和一個發送器。

首先，我們創建接收器，它連接到我們的 PeerJS 服務器，並監聽接收到的數據。new Peer() 的第一個參數是我們的同行名稱，我們稱其為 receiver：

包含 PeerJS 客戶端（使用最新可用的庫版本更改）：

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js"></script>

然後，我們初始化 Peer 對象。connection 事件在另一個同行連接到我們時被調用。收到數據後，將調用 data 事件並傳入數據：

1
2
3
4
5
6
7
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() 方法將數據發送到另一端：

1
2
3
4
5
6
7
const peer = new Peer('sender', { host: 'localhost', port: 9000, path: '/' })

const conn = peer.connect('receiver')

conn.on('open', () => {
 conn.send('hi!')
})

這是最基本的例子。

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

tags: [“WebRTC”, “PeerJS”, “real-time communication”, “Web browsers”, “backend”]