A.webRTC
webRTC是WebReal-TimeCommunication的简写支持浏览器进行实时语音对话或视频对话。可以参考[百度百科]的介绍。()
B.peerjs
peerjs是一个对webRTCAPI的封装,提供简单可配的联接设置,具体可参考其官网。简单介绍一下其使用步骤。webRTC利用中介服务器,仅须要一个用户标示,即可使两个端(peer)构建起专有联接(后续通讯不再须要经过服务器)。
B.1脚本安装
官网上介绍了最便捷的脚本获取方法,通过CDN。
#9:3:9:6:a:3:8:9:8:3:6:6:9:c:e:c:4:a:1:4:4:2:c:0:0:c:8:c:3:6:c:5#
你们也可以依照官网给的下载链接直接下载脚本文件。
B.2创建一个端
当没有指定联接参数时,其默认使用的是该库提供的中介服务器。
#8:e:b:5:8:f:1:f:1:0:5:9:b:5:d:f:b:4:5:2:9:d:1:1:f:0:9:4:c:5:3:f#
C.示例工程helloworldC.1新建页面,引入脚本
#5:f:3:7:e:3:9:5:8:c:b:e:7:3:c:c:0:8:6:f:3:9:8:f:7:8:9:6:4:1:2:b#
页面有一个当与中介服务器联接完善后,更新为自身的id;
一个文本框,用以用户输入须要发送的消息内容;
一个发送按键,用以触发发送动作;
一个
#0:2:d:3:6:4:1:c:f:4:f:4:8:8:9:d:a:4:a:0:8:8:8:9:b:9:2:1:6:f:9:c#
当与中介服务器联接后,获取到当前访问页面的id,并在中显示;
注册error风波,便于我们在发生错误时晓得错误的内容。
开房者(游戏发起方)
#9:7:b:f:6:a:9:6:7:4:c:a:c:b:d:2:a:5:e:3:4:8:3:2:3:f:a:8:8:3:9:c#
联接打开后open,向对方发送一条消息hellofromhoster;
收到消息data更新收到的消息至
#6:2:f:3:b:3:1:5:7:8:4:e:1:c:5:4:f:4:d:7:1:c:b:4:2:0:a:0:b:1:d:6#
通过判断是否指定联接(location.hash)目标判定该页面是卧室的发起方还是加入方。联接完善后向开房者发送Hellofromguest!。打开两个浏览器,在第二个窗口中以#a9wncox5jve00000添加联接目标,两个浏览器之间可以见到如下内容:
#3:2:8:3:0:6:f:6:6:3:e:f:f:1:8:0:a:c:d:1:1:0:3:8:6:1:9:9:7:5:e:8#
screen-shot.png
可以试着通过文本框在两个浏览器窗口之间发送消息。
至此本文的核心内容早已介绍完毕,后续我们会将本文介绍的内容用在游戏中。
D.peerjs-server
假如想自己维护用户登入信息,联接信息之类的状态(用以支持游戏大厅的创建,),我们须要构建自已的联接中介服务,好在该库同时提供了该中介服务的实现,不须要我们再自动编撰该部份的代码,直接集成即可。
D.1安装
因为本节我们仅使用服务功能,因而我全局安装该服务。
#7:5:8:e:d:2:3:e:b:a:5:2:f:7:3:d:7:c:8:9:5:f:5:d:f:c:1:4:8:b:e:3#
D.2启动服务
我们不设置联接key,直接在9000端口启动中介服务。
#9:b:d:6:7:6:8:f:f:c:e:c:a:9:e:c:1:c:7:c:e:c:0:1:a:0:5:8:d:d:1:7#
D.3更改代码使用自己服务
我们仅须要在创建Peer对象时指定中介服务器地址即可:
#7:e:c:e:6:a:4:b:9:7:d:a:e:6:9:b:b:7:4:e:9:3:3:c:9:9:b:3:9:d:7:c#
更多具体的配置也可以参考GitHub中的Readme.md
E.示例E.1代码E.2在线示例
开启两个页面,第一个页启动后,复制该页面的ID,在第二个窗口中的地址后粘贴上该#ID,使第二个窗口作为连接客户构建两个端(窗口)的联接。也可以通过手机(联通网路)浏览器与笔记本进行联接。
目前因为GitHub上的页面是基于https的,而peerjs中介服务使用的是http,浏览器会制止访问混和内容,后续游戏大厅一节,会搭建一个使用https的中介服务,届时该在线事例也会可用。
#f:5:0:c:0:3:d:b:a:f:9:c:a:d:3:9:5:3:b:8:4:3:2:e:9:2:5:3:c:4:a:b#