我們介紹了最流行的物聯網協議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'
|