我们介绍了最流行的物联网协议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. 关于“C++语言程序设计”书的一个类

    class book{    char* title;    int num_pages;    int cur_page;public:    book(const char* theTitle, ...

  2. mybatis编写流程（老版本的方式，新版本用接口式编程）

    1.根据xml配置文件(全局配置文件)创建一个SqlSessionFactory对象 有数据源一些运行环境信息2.sql映射文件:配置了每一个sql,以及sql的封装规则等.  3.将sql映射文件注 ...

  3. 洛谷 1082 同余方程——exgcd(水题)

    题目:https://www.luogu.org/problemnew/show/P1082 大水题. #include<iostream> #include<cstdio> ...

  4. ADB命令小结

    )adb devices //查看启动的所有设备 )adb kill-server //重启设备 )adb start-server //启动设备 )adb -s emulator-(通过 adb d ...

  5. aidl笔记 2/5/2015

    interface Test { //测试的接口 void fun();} Stub 是一个Binderclass Stub extend Binder implements Test { publi ...

  6. android开发中怎么通过Log函数输出当前行号和当前函数名

    public class Debug { public static int line(Exception e) { StackTraceElement[] trace = e.getStackTra ...

  7. 配置哨兵监控Redis运行情况

    Redis的主从架构,如果master发现故障了,还得手动将slave切换成master继续服务,手动的方式容易造成失误,导致数据丢失,那Redis有没有一种机制可以在master和slave进行监控 ...

  8. c语言里如何调用汇编里的变量？

    c语言里如何调用汇编里的变量? 汇编语言:是声明全局变量 .globl _end_ofs _end_ofs: .word _end - _start c语言:声明这个变量,然后再调用这个变量 void ...

  9. JS正则对象 RegExp（有变量的时候使用），用来匹配搜索关键字（标红）

    1,平常我们写js正则规则的时候,一般是这样写: var reg = /abc/; 然而,这样写的话,如果abc是一个变量这样就不行,我们需要下面这种写法: var abc = "汉字&qu ...

  10. ubuntu_ root change to user

    (1)从user用户切换到root用户 不管是用图形模式登录Ubuntu,还是命令行模式登录,我们会发现缺省的用户是user 但是当我们需要执行一些具有root权限的操作(如修还系统文件)时,经常需要 ...