用“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里鲜花用到了对象池和动画,没有什么难点。以上就完成了项目。


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/

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页