云巴-JavaScript API测试与实例（新）

时间 2019-12-09

标签 javascript api 测试实例栏目 JavaScript 繁體版

原文原文链接

1、云巴介绍

　　给你们推荐一个提供后台消息服务的服务供应商，我的用户通常是免费的，可做为开发者的后台服务提供商。javascript

　　官网css

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

2、JavaScript JDK下载与引入

　　　JDK下载java

3、应用实例

一个简单的浏览器端接收云巴消息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+'\r\n'+"来自云巴:"+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+'\r\n'+"来自云巴:"+data.topic+"的消息："+data.msg+"");
});