背景
这次想开发一个双屏互动的案例,考虑到数据实时性及ajax轮询对服务器的压力,尝试用websocket来实现。
自行搭建websocket服务,时间成本和技术成本较高,故寻找第三方服务。经检索,发现goeasy、LeanCloud、野狗云,三家“实时通信引擎”服务商,分析文档考虑价格、便捷性,决定用野狗。
项目分析
“我和女神的故事”H5的玩法逻辑是:
第一步,用户A进入链接显示二维码“页面一”;
第二步,用户B扫描二维码配对成功显示“页面三”,用户A则显示“页面二”;
第三步,用户B点击送花按钮,鲜花由“页面三”飞入“页面二”,实现屌丝给女神送花互动。
开发思路(二维码->配对成功->开始互动):
第一部手机,随机生成roomID(创建房间);
第二部手机,通过roomID(扫描二维码)进行匹配;
第二部手机,点击交互,两部手机分别播放相应动画。
数据库结构:
一级:room
二级: roomID(唯一性)
三级: pairState(配对状态 false/true)
emitState(发射状态 false/true)
数据在野狗里显示为下图:
实现
按照野狗的文档,先初始化实例,分为三步,第一步创建应用,第二步安装SDK(cocos要导为插件,如果是html直接引入javascript即可),第三步创建Sync实例。
用户A代码部分,
写入数据,set() 方法用于向指定节点写入数据,
// 用户A,创建房间
var roomID = this.getRandChar(3); // 房间ID,时间戳+随机数
ref.child("rooms/" + roomID).set({
"pairState": false, // 初始化配对状态
"emitState": false // 初始化发射状态
}, function(error) {
if (error == null){
// 数据同步到野狗云端成功完成
// 显示出二维码“页面一”
}
});
(生成二维码的方法见《html5网页及Cocos中生成二维码》)
监听数据,on() 或 once() 方法用于监听节点的数据,update() 方法用于更新指定子节点,
// 用户A,监测配对状态
ref.child("rooms/" + roomID + "/pairState").on('value', function(data) {
if(data.val()){
// 配对成功,显示“页面二”
}
}, function(error) {
});
// 用户A,监测发射状态
ref.child("rooms/" + roomID + "/emitState").on('value', function(data) {
if(data.val()){
// 监测到发射状态为true,播放“收到鲜花”的动效
// 恢复发射状态为false
ref.child("rooms/" + roomID).update({
"emitState": false
}, function(error) {
if (error == null){
// 数据同步到野狗云端成功完成
}
});
}
}, function(error) {
});
用户B代码部分,
// 用户B,更新配对状态
this.roomID = this.getUrlParam("roomID"); // 通过扫描二维码打开带有房间ID参数的链接,获取房间ID
this.ref.child("rooms/" + this.roomID).update({
"pairState": true
}, function(error) {
if (error == null){
// 数据同步到野狗云端成功完成
// 配对成功,显示“页面三”
}
});
点击送花按钮,
// 用户B,更新发射状态
this.ref.child("rooms/" + this.roomID).update({
"emitState": true
}, function(error) {
if (error == null){
// 数据同步到野狗云端成功完成
// 播放“送出鲜花”的动效
}
});
要注意一点,在写代码时一定要把访问数据的路径写对。
在cocos里鲜花用到了对象池和动画,没有什么难点。以上就完成了项目。
Demo二维码
BTW
1、通过这次Demo发现,这是个纯前端的开发,根本没涉及到接口和数据库。这种“无后端开发”对于轻量级的H5开发来说确实便捷,接口数据库这些都不需要自行开发,会节省大量的开发时间。
2、野狗是分服务等级的,对日活跃设备数有限制。正式项目的开发,要考虑流量及成本来决定是否采用此服务。
3、分析几个“双屏互动H5案例”(链接在底部),案例2奔驰采用的websocket、案例3杜蕾斯用的ajax,所以双屏互动开发websocket并不是唯一的选择。后续分享一篇使用阿里云(ECS+RDS)实现交互的博文。
参考链接
野狗说明文档:https://docs.wilddog.com/sync/Web/index.html
goeasy说明文档:http://goeasy.io/resources/www/docs/goeasy-reference-0.1.18-cn.pdf
LeanCloud说明文档 :https://leancloud.cn/docs/js_realtime.html
高大上的双屏互动,你玩过了吗?【双屏互动H5欣赏】:https://www.iguoguo.net/2015/58411.html
WebSocket实现多屏互动的分析及方案:https://blog.csdn.net/u012889638/article/details/50586783
简单理解Socket:http://www.cnblogs.com/dolphinX/p/3460545.html
leancloud和野狗有什么区别,优势在哪?:https://www.zhihu.com/question/37301314
为什么创业公司不再需要后端工程师?:
https://cn.technode.com/post/2015-03-16/do-not-need-backend-engineer/