云巴-JavaScript API测试与实例(新)
2015-12-28 15:47
597 查看
一、云巴介绍
给大家推荐一个提供后台消息服务的服务供应商,个人用户一般是免费的,可作为开发者的后台服务提供商。官网
专注于为需要实时数据交换的产品提供完美解决方案。支持包括 手机、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+""); });
相关文章推荐
- js一些 难记的
- 使用Response.Write(<script language=javascript>alert的注意事项
- 手机网页js提示小插件
- 关于iframe的高度自适应问题(js)
- 关于JavaScript修改CSS样式
- ObjC 巧用反射和KVC实现JSON快速反序列化成对象
- C#使用Json.Net遍历Json
- 通过ajax读取json格式数据字符串出现回车时出错问题解决
- 用js怎么控制submit提交表单
- JSON与XML的区别比较
- html页面引用js路径问题解决
- JSON 之FastJson解析
- json2
- javascript滚动栏响应鼠标滑轮的实现上下滚动事件
- 在chrome中取svg里面的元素的宽度和高度
- jstat命令详解
- ecshop后台,listtable.js使用
- JVM调优总结 + jstat 分析
- json
- 简单介绍JavaScript数据类型之隐式类型转换