用“websocket第三方服务”野狗云实现双屏互动H5

背景

这次想开发一个双屏互动的案例，考虑到数据实时性及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，播放“收到鲜花”的动效// 恢复发射状态为falseref.child("rooms/" + roomID).update({"emitState": false}, function(error) {if (error == null){// 数据同步到野狗云端成功完成}});}}, function(error) {});

用户B代码部分，

        // 用户B，更新配对状态this.roomID = this.getUrlParam("roomID"); // 通过扫描二维码打开带有房间ID参数的链接，获取房间IDthis.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/