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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 PeerServerconn.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);
});
});C. 示例工程 helloworld
C.1 新建页面，引入脚本
<html><head> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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/id?ts=15358600772210.20129740415067787”[详细了解]////////////////////chrome 已阻止载入混合活动内容“http://0.peerjs.com:9000/peerjs/id?ts=15358600772210.20129740415067787”[详细了解]
作者：清洼
链接：https://www.jianshu.com/p/718bc347a042
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
