WebRTC庫PeerJS簡介

使用WebRTC可能很困難。 PeerJS是一個很棒的庫,它使WebRTC更加容易

我寫了WebRTC。那篇文章描述了使用協議使2個Web瀏覽器直接相互通信的細節。

在該教程中,我提到了一些庫可以抽像出許多細節,以便允許WebRTC通信。

這些庫之一是PeerJS,它使實時通信變得非常簡單。

首先,您需要有一個後端,以允許2個客戶端進行同步,然後它們才能直接相互通信。

在文件夾中,初始化npm項目使用npm init,使用安裝PeerJSnpm install 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!’) })

那是您可以做的最基本的例子。

首先,打開接收者頁面,然後打開發送者頁面。接收者收到消息直接地來自發件人,而不是來自集中式資源。服務器部分僅需要交換信息,因此這兩個部分可以連接。在那之後,它不再乾擾。

免費下載我的JavaScript初學者手冊


更多js教程: