在HTML页面中显示MQTT网络通道数据

Question

I have to display data of mqtt channel to the html page. I have prepared a node js code for the same as following :

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');

And i am able to get data which i need to parse using JSON formatter and have to display it in html page.

I am confused as I am little new to all of this, how would I be able to use nodejs variable to the html page as it is a server side javascript.

How would I be able to connect with mqtt channel because every time it is saying mqtt is not defined.

I preferred not to use node and subscribe this channel in html page by using mqtt and by parsing the JSON data, I want to display latitude and longitude in google map. How would I be able to connect and get JSON response at front-end side ?

Please guide me. Thanks in advance.

Answer 1

Rather than write your own MQTT to Web bridge have you considered using a MQTT broker that supports WebSockets?

If you use the Paho library you can subscribe to the topics you are interested directly from javascript in the page.