雲巴-JavaScript API測試與例項（新）

GabrielChenCN發表於2015-12-28
JavaScriptAPI

一、雲巴介紹

　　給大家推薦一個提供後臺訊息服務的服務供應商，個人使用者一般是免費的，可作為開發者的後臺服務提供商。

　　官網

　　專注於為需要實時資料交換的產品提供完美解決方案。支援包括 手機、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+'\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+"");
});


 

相關文章