How to build your own custom MQTT dashboard?

This post will show you how to build your own custom MQTT dashboard that will display MQTT messages using Node.js, HTML, CSS, and Javascript
We are using mqtt.js to communicate with our Mosquitto MQTT broker and use Plotly.js to draw our graphical charts.
WriteUp:
www.donskytech.com/how-to-bui...
Publish and Subscribe to MQTT messages over WebSocket:
• Publish and Subscribe ...
Code:
github.com/donskytech/mqtt-cu...
Responsive Dashboard:
• Responsive Admin Dashb...
If you like my post or videos then please consider subscribing to my channels and sharing them with your friends:
Website: www.donskytech.com
UA-cam: / donskytech
Facebook: / donskytech
Twitter: / donskytech
If you are generous and think I have helped you, please consider buying me a coffee. 🙂
Buy Me a Coffee:
buymeacoffee.com/donskytech
#mqtt
#mosquitto
#node
#express
#mqtt.js

[@memet9313]

great project and video, I'm appreciated..... your work is awesome,

[@DonskyTech]

Hey, thanks for the kind words! Kindly subscribe to my channel if you have not done so. I have lots of unique contents to share in the future.

[@ariel18012]

Excelente video, muy bueno, ojala puedas migrarlo a react con firebase, y dandole
un giro muy bueno. Sigue asi!!!

[@DonskyTech]

Thanks! If I have time, I would try it later. Please consider subscribing to my channel if you have not done so.

[@e_xtazzy]

This looks really good!

[@DonskyTech]

Hey, thank you!

[@e_xtazzy]

Where I can contact you, I need some help on connecting it to a broker with username and password@@DonskyTech

[@Kanze_89]

Great project nice man. Btw how to show up AWS data on that dashboard?

[@nickljr]

Hey! Great work! I would like to discuss something with you, what’s the best way to reach out?

[@chebron5258]

Hello, great example. Mine is running well with Web Socket. How to use TCP instead of Web Socket?

[@DonskyTech]

Hey, I have not look into that but that is a great idea as well. I will list that up into the projects that I would write in the future. For the meantime, please subscribe to my channel. Thank you.

[@David-iq1kd]

Are there any reasons you would not want to use MQTT.js directly in the client side js, instead of needing a node.js back end?

[@DonskyTech]

Hey, there's no specific reason. I have used this library in both server-side Node.js modules and on the client side. I have used it on the server side for this project, but for the other videos, I am using the client side.

[@mofanc3710]

First of all, I would like to say thank you very much, the video you made was extraordinary
Sir, I would like to ask, if I want to not only display data in real-time but also store the data sent by the microcontroller in some database (to store and view data history later), is this scenario possible for a communication scheme with mqtt-websocket
Thanks

[@DonskyTech]

Hey, yes.. very much possible. I will think about writing a content about this topic in the future. For the meantime, please subscribe to my channel.

[@Killerpants1125channel]

hi again! im running mqtt from my raspberry pi, is it a need to use websocket or can i just use mqtt itself?

[@DonskyTech]

Hey, you can use MQTT or WebSocket. It really depends on what you want to do. If you want to save your data in a database using MQTT at the server then you can do that.

[@tronauts1699]

I have adjusted mqtt_broker and mqtt_topic in VSC with MQTTX and can also publish and subscribe... but at the end of the experiment, the dashboard says Connection Status: Disconnect/Closed. Why did it happen?

[@inhlong7946]

I changed brokerUrl but
Why can't I publish data from MQTTX?

[@DonskyTech]

Hey, Maybe try directly with MQTTX with your broker first. See if you could receive MQTT messages.

[@edinetgrunhed6000]

did you try external ip address other than localhost?

[@DonskyTech]

I have been testing locally on the same laptop but looking at the documentation from here mosquitto.org/man/mosquitto-conf-5.html, you can set the bind address from the listener settings.

[@sridhars3467]

Great Vid... Subscribing you right away.

[@Fans_CristianoRonaldo7]

how to run this web dashboard..?

[@DonskyTech]

Hey, check the Github page or instructions

[@fogus3985]

Web dashboard is disconnected, what should I do?

[@DonskyTech]

Hey, Sorry what do you mean by disconnected?

[@muhammadrifqy24]

i got issue
ErrorWithReasonCode: Connection refused: Not authorized

[@DonskyTech]

Your MQTT might be configured with password.. You probably need to send your credentials.

[@muhammadrifqy24]

@@DonskyTech can you tell me how do i send the credentials?