我们介绍了最流行的物联网协议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. Asterisk 拨号方案中截取字符串

    在dialplan中要截取字符串可用如下几种方式: 1.转到agi中由php进行处理,这种方法比较简单,在这里不再缀述 2.在dialplan中利用内置的方法进行截取 如 [test] exten = ...

  2. the generation has been cancelled because errors have been found by the check model

    生成物理模型出现这个错误的话,那就打开“生成物理模型”(快捷键 ctrl+shift+p) 然后找到 Detail → Option 接着讲Check mode复选框去掉.

  3. mysql分区表之四：分区表性能

    一,      分区概念  分区允许根据指定的规则,跨文件系统分配单个表的多个部分.表的不同部分在不同的位置被存储为单独的表.MySQL从5.1.3开始支持Partition. 分区和手动分表对比 手 ...

  4. 微信小程序WXML提供了import和include引用方式

    引入的文件需要放在pages文件下: 例如: 在pages文件下新建template文件夹,新建tem1.wxml模板文件 在其他页面中就可以引入tem1.wxml文件../template/tem1 ...

  5. C# 获取点击列的索引

    datagridview 怎么获取选中行的某一列的索引比如 下面是表学号 姓名 所在年级 1    张     高一 2    李     高二当我选择第二行的时候 我想取所在年级的列索引 这时候那个 ...

  6. 1.1-1.3 HBase入门

    一.HBASE入门 部分参考链接:https://www.cnblogs.com/steven-note/p/7209398.html 1.简介 HBase – Hadoop Database,是一个 ...

  7. c语言中的# ## 可变参数宏 ...和_ _VA_ARGS_ _

    1.#假如希望在字符串中包含宏参数,ANSI C允许这样作,在类函数宏的替换部分,#符号用作一个预处理运算符,它可以把语言符号转化程字符串.例如,如果x是一个宏参量,那么#x可以把参数名转化成相应的字 ...

  8. bugfree-解决方案的意思

    BugFree的7种解决方案各自的含义: By Design - 就是这么设计的,无效的Bug Duplicate - 这个问题别人已经发现了,重复的Bug External - 是个外部因素(比如浏 ...

  9. node-sass安装失败

    1. 直接安装报错(版本根据自己需求来) npm i node-sass@ -D 报错不能下载 win32-x64-64_binding.node Downloading binary from ht ...

  10. lightoj 1034【强连通+缩点】

    思路: 缩点,计算入度为0点的个数即可: #include<bits/stdc++.h> using namespace std; typedef long long LL; const ...