|
楼主 |
发表于 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”[详细了解] |
|