zoukankan      html  css  js  c++  java
  • 云巴-JavaScript API测试与实例(新)

    一、云巴介绍

      给大家推荐一个提供后台消息服务的服务供应商,个人用户一般是免费的,可作为开发者的后台服务提供商。

      官网

      专注于为需要实时数据交换的产品提供完美解决方案。支持包括 手机、Web、智能设备 的几乎所有平台。

    二、JavaScript JDK下载与引入

       JDK下载

    三、应用实例

    一个简单的浏览器端接收云巴消息demo

    1.引入bootstrap作为默认样式插件

    建立一个client.html并引入bootstrap
    <!DOCTYPE html>
    <html>
    <head>
    <title>云巴推送---消息收听</title>
    
    	<!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="bootstrap.min.css">
    
    <!-- 可选的Bootstrap主题文件(一般不用引入) -->
    <!-- <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> -->
    
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
    <script src="jquery-1.10.2.min.js"></script>
    
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="bootstrap.min.js"></script>
    
    </div>
    </body>
    </html>

    2.依次引入socket.io 和 yunba-js-sdk.js

    注意:一定先引入socket.io再引入yunba-js-sdk.js
     
    <script src="socket.io-1.3.5.min.js"></script>
    
    <script src="yunba-js-sdk.js"></script>


    3.建立client.js并绘制client.html的UI

    client.html最终代码如下
     
    <!DOCTYPE html>
    <html>
    <head>
    <title>云巴推送---消息收听</title>
    
    	<!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="bootstrap.min.css">
    
    <!-- 可选的Bootstrap主题文件(一般不用引入) -->
    <!-- <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> -->
    
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
    <script src="jquery-1.10.2.min.js"></script>
    
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="bootstrap.min.js"></script>
    
    
    
    <script src="socket.io-1.3.5.min.js"></script>
    
    <script src="yunba-js-sdk.js"></script>
    
    <script src="client.js"></script>
    
    
    </head>
    <body>
    
    
    
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, Yunba!</h1>
      <p>点击订阅接受推送消息</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">订阅</a></p>
      </div>
    </div>
    
    <div class="dialog">
    	<h3>消息框</h3>
    	<textarea class="form-control" rows="6" disabled="">
    		
    	</textarea>
    </div>
    </body>
    </html>


    4.client.js 

    1.new Yunba()
    首先引入确保client.js在client.html中的引用顺序,并添加如下代码实例化yunba。在appkey处填写你自己的appkey(请先注册账号并建立一个应用)
     
    var yunba = new Yunba({server: 'sock.yunba.io', port: 3000, appkey: "your appkey"});
     
    2.yunba.init
    使用yunba.init方法初始化云巴,并连接云巴服务器
     
    yunba.init(function (success) {
        if (success) {
           $(".container").append("<p>初始化成功</p>");
            console.log('初始化成功');
           mqtt_connect();
           
        }
    }, function () {
    
    	//重新连接
        
    });

    3.yunba.connect_by_customid(cid, connected);
    使用yunba.connect_by_customid(cid, connected)方法连接响应应用
     
     function mqtt_connect() {
            var cid = "8888";
            var connected = function(success, msg, sessionid) {
              if (success) {
               $(".container").append("<p>连接成功</p>");
                console.log('连接成功');
              } else {
                alert(msg);
              }
            };
    
            if (!cid || cid.length === 0) {
              alert('请输入自定义ID');
            } else {
              yunba.connect_by_customid(cid, connected);
            }
        }


     
    4.yunba.subscribe
    使用yunba.subscribe方法定义订阅的频道
     
     
    function Yunba_subscribe(){
    //默认一个12345频道
    var topic = "12345";
    yunba.subscribe({'topic': topic}, 
        function (success, msg) {
            if (success) {
                console.log('你已成功订阅频道:12345');
                $(".dialog textarea").val("你已成功订阅频道:12345");
            } else {
                console.log(msg);
            }
        }
    );
     
    5.yunba.set_message_cb
    使用yunba.set_message_cb来实时监听并接受云巴消息
     
    yunba.set_message_cb(function (data) {
        console.log('Topic:' + data.topic + ',Msg:' + data.msg);
        var val = $(".dialog textarea").val();
        $(".dialog textarea").val(val+'
    '+"来自云巴:"+data.topic+"的消息:"+data.msg+"");
    });



    6.最终client.js代码如下,已经可以在云巴官网的应用界面向订阅了相应频道(“12345”)的web页面发送消息并实时响应
     
    var yunba = new Yunba({server: 'sock.yunba.io', port: 3000, appkey: ""});
    
    
    
    yunba.init(function (success) {
        if (success) {
           $(".container").append("<p>初始化成功</p>");
            console.log('初始化成功');
           mqtt_connect();
           
        }
    }, function () {
    
    	//重新连接
        
    });
    
     function mqtt_connect() {
            var cid = "8888";
            var connected = function(success, msg, sessionid) {
              if (success) {
               $(".container").append("<p>连接成功</p>");
                console.log('连接成功');
              } else {
                alert(msg);
              }
            };
    
            if (!cid || cid.length === 0) {
              alert('请输入自定义ID');
            } else {
              yunba.connect_by_customid(cid, connected);
            }
        }
    $(document).ready(function(e){
      $(document).on("click","a",function(){
        console.log('订阅点击');
        Yunba_subscribe();
      })
    })
    
    function Yunba_subscribe(){
    
    var topic = "12345";
    yunba.subscribe({'topic': topic}, 
        function (success, msg) {
            if (success) {
                console.log('你已成功订阅频道:12345');
                $(".dialog textarea").val("你已成功订阅频道:12345");
            } else {
                console.log(msg);
            }
        }
    );
    
    
    }
    
    
    
    
    yunba.set_message_cb(function (data) {
        console.log('Topic:' + data.topic + ',Msg:' + data.msg);
        var val = $(".dialog textarea").val();
        $(".dialog textarea").val(val+'
    '+"来自云巴:"+data.topic+"的消息:"+data.msg+"");
    });


     
  • 相关阅读:
    Codeforces 1255B Fridge Lockers
    Codeforces 1255A Changing Volume
    Codeforces 1255A Changing Volume
    leetcode 112. 路径总和
    leetcode 129. 求根到叶子节点数字之和
    leetcode 404. 左叶子之和
    leetcode 104. 二叉树的最大深度
    leetcode 235. 二叉搜索树的最近公共祖先
    450. Delete Node in a BST
    树的c++实现--建立一棵树
  • 原文地址:https://www.cnblogs.com/gabrielchen/p/5082817.html
Copyright © 2011-2022 走看看