用peerjs创建webRTC通讯房间

迷茫之鹰 · 发表于 2023-6-28 12:26:20

pc2g,电脑好游戏以下文字转载自https://www.jianshu.com/p/718bc347a042

A. webRTC

webRTC是Web Real-Time Communication的缩写支持浏览器进行实时语音对话或视频对话。可以参考[百度百科]的介绍。(https://baike.baidu.com/item/WebRTC/5522744)
B. peerjs

peerjs 是一个对webRTC API的封装，提供简单可配的连接设置，具体可参考其官网。简单介绍一下其使用步骤。webRTC 借助中介服务器，仅需要一个用户标识，即可使两个端(peer)建立起专有连接(后续通信不再需要经过服务器)。
B.1 脚本安装

官网上介绍了最方便的脚本获取方式，通过CDN。

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

大家也可以根据官网给的下载链接直接下载脚本文件。
B.2 创建一个端

当没有指定连接参数时，其默认使用的是该库提供的中介服务器。

// 节点对象创建
var peer = new Peer();

// 连接发起方(client)
var conn = peer.connect('another-peers-id');
// on open will be launch when you successfully connect to PeerServer
conn.on('open', function(){
  // here you have conn.id
  conn.send('hi!');
});

// 连接接收方(host)
peer.on('connection', function(conn) {
  conn.on('data', function(data){
// Will print 'hi!'
console.log(data);
  });
});

迷茫之鹰 · 发表于 2023-6-28 12:28:01

C. 示例工程 helloworld
C.1 新建页面，引入脚本

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.9/peer.min.js"></script>
</head>

<body>
<label id="myID"></label>
<form>
      <textarea id="msg"></textarea>
      <button type="submit">发送</button>
</form>
<pre id="recv"></pre>
</body>
</html>

页面有一个<label>当与中介服务器连接建立后，更新为自身的id；
一个<textarea>文本框，用以用户输入需要发送的消息内容；
一个<button>发送按钮，用以触发发送动作；
一个<pre>标签用以显示接收到的内容。

C.2 添加代码逻辑
创建端对象

为确保引用脚本，页面元素加载完成，我们在window.load中完成相关逻辑的编写。

         var peer = new Peer();
         var conn = undefined;

         peer.on('error', function (err) {
            alert('' + err)
         });

         peer.on('open', function (id) {
                  console.log('My peer ID is: ' + id);
                  document.getElementById("myID").innerText =`端ID:${id}`;

            });

当与中介服务器连接后，获取到当前访问页面的id，并在<label>中显示；
注册error事件，以便我们在发生错误时知道错误的内容。
开房者(游戏发起方)

// 开房者，initiator
            peer.on('connection', function (c) {
                  conn = c;
                  console.log(`connection established`);

                  conn.on('open', () => {
                     console.log(`connection is ready for use`);

                     conn.send('hello from hoster');
                  })

                  conn.on('data', function (data) {
                     console.log('Initiator Received', data);

                     document.querySelector('#recv).textContent = data;
                  });
            });

连接打开后open，向对方发送一条消息hello from hoster;
收到消息data更新收到的消息至<pre>标签。
进入房间者(游戏加入者)

            if (location.hash) {
            // 加入房间者，connector
            console.log(`connecting to ${location.hash.substr(1)}`);
            conn = peer.connect(location.hash.substr(1));

            conn.on('open', function () {
                  console.log(`connected to ${location.hash.substr(1)}`);
                  // Send messages
                  conn.send('Hello from guest!');

                  // Receive messages
                  conn.on('data', function (data) {
                     console.log(`connector rec ${data}`);
                     document.querySelector('#recv').textContent = data;
                  });

                  conn.on('close', () => {
                     console.log('close current connection');
                  })

                  conn.on('error', (err) => {
                     alert(`connection err ${err}`);
                  })
            });

         }

通过判定是否指定连接(location.hash)目标判断该页面是房间的发起方还是加入方。连接建立后向开房者发送Hello from guest!。打开两个浏览器，在第二个窗口中以#a9wncox5jve00000添加连接目标，两个浏览器之间可以看到如下内容：
screen-shot.png

可以试着通过文本框在两个浏览器窗口之间发送消息。

至此本文的核心内容已经介绍完毕，后续我们会将本文介绍的内容用在游戏中。

D. peerjs-server

如果想自己维护用户登录信息，连接信息之类的状态（用以支持游戏大厅的创建,参见本系列文章(3)），我们需要建立自已的连接中介服务，好在该库同时提供了该中介服务的实现，不需要我们再手动编写该部分的代码，直接集成即可。
D.1 安装

由于本节我们仅使用服务功能，因此我全局安装该服务。

>npm install peer

D.2 启动服务

我们不设置连接key，直接在9000端口启动中介服务。

> peerjs --port 9000

D.3 修改代码使用自己服务

我们仅需要在创建Peer对象时指定中介服务器地址即可：

var peer = new Peer( {host: 'localhost', port: 9000});

更多具体的配置也可以参考GitHub中的Readme.md
E. 示例
E.1 代码
E.2 在线示例

开启两个页面，第一个页启动后，复制该页面的ID，在第二个窗口中的地址后粘贴上该 #ID，使第二个窗口作为连接客户建立两个端(窗口)的连接。也可以通过手机(移动网络)浏览器与电脑进行连接。

目前由于GitHub上的页面是基于https的，而peerjs中介服务使用的是http，浏览器会阻止访问混合内容，后续游戏大厅一节，会搭建一个使用https的中介服务，届时该在线例子也会可用。

ff
已阻止载入混合活动内容“http://0.peerjs.com:9000/peerjs/ ... 0.20129740415067787”[详细了解]
////////////////////
chrome
已阻止载入混合活动内容“http://0.peerjs.com:9000/peerjs/ ... 0.20129740415067787”[详细了解]

		自动登录	找回密码
密码			加入