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教程: