在html頁面中顯示MQTT webchannel數據

Question

我必須在html頁面上顯示mqtt頻道的數據。我已經準備了一個節點JS的相同的代碼如下：

var mqtt = require('mqtt'); 

client = mqtt.createClient(1883, 'mqtt.beebotte.com', 
//Authenticate with your channel token, 
{username: 'token:TOKEN_KEY', password: ''}); 


client.on('message', function (topic, message) { 
console.log('topic: ' + topic + ' payload: ' + message); 
}); 



client.subscribe('AppTeamDemo/GpsDataUpload'); 
client.subscribe('AppTeamDemo/EventDataUpload'); 
client.subscribe('AppTeamDemo/CommToZiggi'); 
client.subscribe('AppTeamDemo/CommFromZiggi'); 

，我能得到我需要使用JSON格式解析和在HTML頁面來顯示它的數據。

我很困惑，因爲我對這一切都不太瞭解，我怎麼能夠在html頁面中使用nodejs變量，因爲它是服務器端的javascript。

我怎麼能夠連接到mqtt頻道，因爲每次它說mqtt沒有定義。

我更喜歡不使用節點，並通過使用mqtt和解析JSON數據在html頁面中訂閱此頻道，我想在google map中顯示經度和緯度。我如何能夠連接並在前端獲得JSON響應？

請指導我。提前致謝。

Answer 1

您是否考慮使用支持WebSockets的MQTT代理，而不是將自己的MQTT編寫爲Web橋接器？

如果您使用Paho庫，則可以在頁面中直接從javascript訂閱您感興趣的主題。