標籤：

MQTT進階篇

02-09

在MQTT快速入門中，我們介紹了最流行的物聯網協議MQTT的背景以及基本使用方法。在這篇文章中，我們會繼續考察MQTT的高級玩法——與網頁應用的交互。MQTT是基於TCP協議實現，基於HTTP的網頁應用便無法與之交互了。為了解決這個問題，許多MQTT代理加上了對WebSockets的支持，可以方便地實現如下場景：

  • 顯示設備的實時信息
  • 接收報警等推送信息
  • 查看設備的歷史消息

目前Ubuntu 14.04.1 LTS自帶的Mosquitto版本比較低，所以我們將使用PPA上的新版本：

apt-add-repository ppa:mosquitto-dev/mosquitto-ppaapt-get updateapt-get install mosquittoapt-get install mosquitto-clients

以下實驗是基於已經支持WebSockets的1.4.5版本的Mosquitto。打開WebSockets很簡單，只需要在/etc/mosquitto/mosquitto.conf中添加：

listener 8001protocol 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> <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快速入門中提到的命令模擬：

mosquitto_pub -d -q 2 -t floor-5/temperature -m 95

溫度刻度便會隨之變化：

由此可見，MQTT以非同步推送方式連接萬物與信息系統，非常適合物聯網場景。

MQTT系列索引：

  1. MQTT入門篇
  2. MQTT進階篇
  3. MQTT安全篇
  4. MQTT實戰篇

推薦閱讀：

※小米 IoT 開發者大會上幾個可能被低估的要點
※當物聯網、雲計算和大數據發展到一定高度時，計算機能不能實現真正有效率的計劃經濟？
※什麼是物聯網？其發展前景如何？
※物聯網行業什麼時候能發展起來？
※這樣的設計，你會喜歡嗎？

TAG:物联网 | MQTT | WebSocket |