一、云巴介绍

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

  官网

  专注于为需要实时数据交换的产品提供完美解决方案。支持包括 手机、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+"");
});
 

云巴-JavaScript API测试与实例(新)的更多相关文章

  1. API测试自动化——基于CDIF的SOA基本功能(实例篇)

    今天我们通过一些实例来体验一下API的自动化测试,感受一下基于CDIF的SOA的一些基本功能. 传统的测试工具在测试一个API的时候,必须手动填写这个API所需要接收的所有信息,比如一个查询航班动态的 ...

  2. Google Map JavaScript API V3 实例大全

    Google Map JavaScript API V3 实例大全 基础知识 简单的例子 地理位置 语言 位置 坐标 简单的投影 事件 简单事件 关闭事件 多次添加事件 事件属性 控制 php禁用ui ...

  3. aaronyang的百度地图API之LBS云与.NET开发 Javascript API 2.0【基本地图的操作】

    为了更简单的演示,我们创建个.NET的ASP.NET MVC4项目 好了,上面都是后话,POI说白了,就是你的用户的数据,很多数据,不过没关系,因为你的数据如果存在百度的LBS云上,那么大数据你就不用 ...

  4. poium测试库之JavaScript API封装原理

    poium一直我在维护的一个开源项目,它的定位是以极简的方式在自动化项目中Page Objects设计模式.我在之前的文章中也有介绍. 本篇文章主要介绍一个JavaScript元素操作的封装原理. 为 ...

  5. 出色的 JavaScript API 设计秘诀

    设计是一个很普遍的概念,一般是可以理解为为即将做的某件事先形成一个计划或框架. (牛津英语词典)中,设计是一种将艺术,体系,硬件或者更多的东西编织到一块的主线.软件设计,特别是作为软件设计的次类的AP ...

  6. 使用JMeter进行RESTful API测试

    使用JMeter进行RESTful API测试 在哪里设置实现最优脚本重用的属性 由于支持云的应用程序通常可以轻松.快速地进行复制和部署,所以可以在多种环境中对其进行测试.如果您需要在多个环境中测试和 ...

  7. 百度地图 JavaScript API 极速版 开发体会

    前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝 ...

  8. PhantomJS:基于WebKit、开源的服务器端JavaScript API

    PhantomJS是一个基于WebKit的服务器端JavaScript API,它基于 BSD开源协议发布.PhantomJS无需浏览器的支持即可实现对Web的支持,且原生支持各种Web标准,如DOM ...

  9. PhantomJS是一个基于WebKit的服务器端JavaScript API

    PhantomJS是一个基于WebKit的服务器端JavaScript API,它基于 BSD开源协议发布.PhantomJS无需浏览器的支持即可实现对Web的支持,且原生支持各种Web标准,如DOM ...

随机推荐

  1. String中intern()方法

    intren方法:通俗的讲,是将字符串放入常量池中. new出来的字符串是放在堆中,直接赋值的字符串是放在常量池中的. 对字符串做拼接操作,即做“+”运算,分两种情况 (1)表达式右边是纯字符串常量, ...

  2. RC电路简介,RC串并联电路的工作原理及应用

    RC电路简介,RC串并联电路的工作原理及应用 RC电路全称Resistance-Capacitance Circuits.一个 相移电路(RC电路)或称 RC滤波器. RC网络, 是一个包含利用电压源 ...

  3. 3.Airflow使用

    1. airflow简介2. 相关概念2.1 服务进程2.1.1. web server2.1.2. scheduler2.1.3. worker2.1.4. celery flower2.2 相关概 ...

  4. 关于算法的时间复杂度O(f(n))

    (一)算法时间复杂度定义: 在进行算法分析时,语句总的执行次数T(n)是关于问题规模n的函数,进而分析T(n)随n的变化情况并确定T(n)的数量级.算法的时间复杂度,也就是算法的时间量度,记作:T(n ...

  5. timestamp 学习

    该答案摘抄自CSDN. 哇,奇迹,跨度三年了,不知道楼主是否已经解决了此问题. 路过,简单说一下,timestamp 主要是记录该行的最后修改时间戳, 注意,这个时间戳是不可以转换为时间的,只能标注该 ...

  6. 关于双系统下Ubuntu不能访问Windows中某个盘的问题

    1.问题描述   在Ubuntu系统下访问Windows系统中磁盘时出现无法访问的情况,具体如下显示:   该问题为磁盘挂载错误,需要进行修复. 2.解决办法   (1)打开终端:如果没有安装ntfs ...

  7. lintcode-107-单词切分

    107-单词切分 给出一个字符串s和一个词典,判断字符串s是否可以被空格切分成一个或多个出现在字典中的单词. 样例 给出 s = "lintcode" dict = [" ...

  8. IBM存储降级告警等一些服务器问题/dd/ethtool

    1.IBM存储降级告警 一般两种情况 a.端口降级 例如模块16G->8G(IBM储存端口自适应) b.系统在作raid后,有硬盘损坏,降级 黄灯告警 2. dimm error dimm内存插 ...

  9. window redis php(必须版本>=5.4) 安装

    1.下载redis的win版客户端 下载地址: http://code.google.com/p/servicestack/wiki/RedisWindowsDownload 2.选择32bit,64 ...

  10. 分布式架构核心RPC原理

    在应用的迭代演进过程中,随着系统访问量提高,业务复杂度提高,代码复杂度提高,应用逐渐从单体式架构向面向服务的分布式架构转变.RPC(Remote Procedure Call Protocol远程过程 ...