我们介绍了最流行的物联网协议MQTT的背景以及基本使用方法。在这篇文章中，我们会继续考察MQTT的高级玩法——与网页应用的交互。MQTT是基于TCP协议实现，基于HTTP的网页应用便无法与之交互了。为了解决这个问题，许多MQTT代理加上了对WebSockets的支持，可以方便地实现如下场景：
  • 显示设备的实时信息
  • 接收报警等推送信息
  • 查看设备的历史消息
目前Ubuntu 14.04.1 LTS自带的Mosquitto版本比较低，所以我们将使用PPA上的新版本：
1
2
3
4
apt-add-repository ppa:mosquitto-dev/mosquitto-ppa
apt-get update
apt-get install mosquitto
apt-get install mosquitto-clients
以下实验是基于已经支持WebSockets的1.4.5版本的Mosquitto。打开WebSockets很简单，只需要在/etc/mosquitto/mosquitto.conf中添加：
1
2
listener 8001
protocol websockets
指定以上配置文件重启Mosquitto服务之后，便可以通过任意MQTT over WebSockets的界面，比如HiveMQ WebSockets Client Showcase或者MQTT Client Sample来把玩了:

浏览器其实是以WebSockets协议与MQTT代理交互的，不但可以完成mosquitto_pub和mosquitto_sub的功能，还可以结合HTML5的特性完成很多有意思的场景。下面我们就来实现温度感知器的图形界面。
下面是网页应用的源代码，其中用到了Paho JavaScript Client实现了MQTT over WebSockets：
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<title>Start Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="mqttws31.js"></script>
</head>
<body>
<label>当前温度</label>
<meter max="100" low="60" high="80" value="30" id="meter"></meter>
 
<script>
var client = new Paho.MQTT.Client("host", 8001, "clientId");
 
client.onMessageArrived = function (msg) {
document.querySelector("#meter").value = msg.payloadString;
};
 
client.connect({
onSuccess: function () {
client.subscribe("floor-5/temperature");
}
});
</script>
</body>
</html>
代码非常直观，在连接到MQTT代理之后便订阅五楼温度的主题。当后台感知器发送温度信息后，比如用MQTT快速入门中提到的命令模拟：
1
mosquitto_pub -d -q 2 -t 'floor-5/temperature' -m '95'
 

MQTT进阶篇的更多相关文章

  1. Membership三步曲之进阶篇 - 深入剖析Provider Model

    Membership 三步曲之进阶篇 - 深入剖析Provider Model 本文的目标是让每一个人都知道Provider Model 是什么,并且能灵活的在自己的项目中使用它. Membershi ...

  2. idea 插件的使用 进阶篇

    CSDN 2016博客之星评选结果公布    [系列直播]零基础学习微信小程序!      "我的2016"主题征文活动   博客的神秘功能 idea 插件的使用 进阶篇(个人收集 ...

  3. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  4. windows系统快捷操作の进阶篇

    上次介绍了windows系统上一些自带的常用快捷键,有些确实很方便,也满足了我们的一部分需求.但是我们追求效率的步伐怎会止步于此?这一次我将会进一步介绍windows上提升效率的方法. 一:运行 打开 ...

  5. python 面向对象（进阶篇）

    上一篇<Python 面向对象(初级篇)>文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使 ...

  6. 最快让你上手ReactiveCocoa之进阶篇

    前言 由于时间的问题,暂且只更新这么多了,后续还会持续更新本文<最快让你上手ReactiveCocoa之进阶篇>,目前只是简短的介绍了些RAC核心的一些方法,后续还需要加上MVVM+Rea ...

  7. SQL Server调优系列进阶篇（查询优化器的运行方式）

    前言 前面我们的几篇文章介绍了一系列关于运算符的基础介绍,以及各个运算符的优化方式和技巧.其中涵盖:查看执行计划的方式.几种数据集常用的连接方式.联合运算符方式.并行运算符等一系列的我们常见的运算符. ...

  8. SQL Server调优系列进阶篇（查询语句运行几个指标值监测）

    前言 上一篇我们分析了查询优化器的工作方式,其中包括:查询优化器的详细运行步骤.筛选条件分析.索引项优化等信息. 本篇我们分析在我们运行的过程中几个关键指标值的检测. 通过这些指标值来分析语句的运行问 ...

  9. SQL Server调优系列进阶篇（深入剖析统计信息）

    前言 经过前几篇的分析,其实大体已经初窥到SQL Server统计信息的重要性了,所以本篇就要祭出这个神器了. 该篇内容会很长,坐好板凳,瓜子零食之类... 不废话,进正题 技术准备 数据库版本为SQ ...

随机推荐

  1. linux文件查找（find,locate）

    文件查找: locate:       非实时,模糊匹配,查找是根据全系统文件数据库进行的: # updatedb, 手动生成文件数据库 速度快   find:       实时       精确   ...

  2. Swift引用计数器

    ARC概述 和4.2+版本的Xcode对OC的支持一样,Swift也是使用ARC来管理内存,文档是这么描述的: Swift uses Automatic Reference Counting(ARC) ...

  3. HDU3157 Crazy Circuits

    传送门 有源汇的上下界网络流求最小流. 这个其实和上道题差不多--题目描述我没怎么看明白--好像就是让你按照他说的把图建出来就行了,注意这个题的字符处理,可能有长度大于1的字符串,要注意一下.求最小流 ...

  4. C++之log4cpp库的使用

    log4..简介 log4..是基于log4j的一系列的c++移植版本,使用了log4j的模式结构,目前主要有以下几个版本: 1. log4cxx, 目前是到0.10.0版,Apache下的孵化项目, ...

  5. Winform安装包出现无法访问网络位置

    1.原因:安装包的安装路径出现了问题 2.如下图:错误路径 3.如下图:正确路径

  6. 1--redis3.0.5集群部署安装详细步骤

    Redis集群部署文档(centos6系统) (要让集群正常工作至少需要3个主节点,在这里我们要创建6个redis节点,其中三个为主节点,三个为从节点,对应的redis节点的ip和端口对应关系如下) ...

  7. hibernate学习三 精解Hibernate之核心文件

    一 hibernate.cfg.xml详解 1 JDBC连接: 2 配置C3P0连接池: 3 配置JNDI数据源: 4 可选的配置属性: 5 hibernate二级缓存属性 6 hibernate事务 ...

  8. Ubuntu 安装mysql和 简单命令操作

    ubuntu上安装mysql非常简单只需要几条命令就可以完成. 1. sudo apt-get install mysql-server   2. apt-get isntall mysql-clie ...

  9. Flutter实战视频-移动电商-54.购物车_商品列表子项布局

    54.购物车_商品列表子项布局 子项做成一个单独的页面 新建cartItem.dart文件 新建cart_page文件夹,在里面新建cart_item.dart页面, 页面名字叫做CartItem 定 ...

  10. 16.oauth2 + oidc 实现 client部分

    把授权和认证过的Server启动一下先 因为代码是之前的代码,所以有些代码需要清除一下 之类注释掉,因为这里暂时没有用到EFCode了 运行的时候发现一点错误 发现登陆的时候使用的RegisterVi ...