用“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，播放“收到鲜花”的动效

                // 恢复发射状态为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里鲜花用到了对象池和动画，没有什么难点。以上就完成了项目。