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'

1. MQTT進階篇
2. Django進階篇
3. Django【進階篇】
4. Vue進階篇
5. django 進階篇
6. DJango進階篇
7. JavaScript進階篇
8. Python - 進階篇
9. Vagrant進階篇
10. # ReactiveCocoa - 進階篇
更多相關文章...
• Scala 高階函數 - Scala教程
• MySQL BIT、BINARY、VARBINARY、BLOB（二進制類型） - MySQL教程
• 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
• 三篇文章瞭解 TiDB 技術內幕——說存儲

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。