你的位置:首页 > Java教程

[Java教程]云巴


一、云巴介绍

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

  官网

  专注于为需要实时数据交换的产品提供完美解决方案。支持包括 手机、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="http://www.cnblogs.com///cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> --><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><!-- <script src="http://www.cnblogs.com///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="http://www.cnblogs.com///cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> --><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><!-- <script src="http://www.cnblogs.com///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 > <div >  <h1>Hello, Yunba!</h1> <p>点击订阅接受推送消息</p> <p><a href="#" role="button">订阅</a></p> </div></div><div >	<h3>消息框</h3>	<textarea 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+"");});