MQTT进阶篇

时间 2019-12-09

标签 mqtt 进阶繁體版

原文原文链接

咱们介绍了最流行的物联网协议MQTT的背景以及基本使用方法。在这篇文章中，咱们会继续考察MQTT的高级玩法——与网页应用的交互。MQTT是基于TCP协议实现，基于HTTP的网页应用便没法与之交互了。为了解决这个问题，许多MQTT代理加上了对WebSockets的支持，能够方便地实现以下场景：

目前Ubuntu 14.04.1 LTS自带的Mosquitto版本比较低，因此咱们将使用PPA上的新版本：

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：

<!DOCTYPE html>

<html>

<head>

<title>Start Page</title>

</head>

<body>

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'