我们介绍了最流行的物联网协议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 ...