Create an MQTT Web App with HTML & JavaScript: Simple and Easy Tutorial! 🌐

In this video we will make MQTT web application or MQTT web dashboard using HTML, CSS and Java Script using the Paho mqtt library for Java script. Also this video explains how we can use the MQTT broker over websockets.

-------------------------------------------------------------------------------------
Video Chapters:
00:00 Introduction
00:50 Why do we need a web app for mqtt projects ?
01:37 How MQTT works on the web ?
01:47 What are websockets ?
02:25 How MQTT works ?
02:48 MQTT over websockets
03:53 writing HTML code for structure of MQTT dashboard
06:23 MQTT library for web app
07:39 MQTT javascript code
1.Connect to broker
2.Subscribe to topic
3.Publish message
16:02 overview of the library

---------------------------------------------------------------------------------------

----------------- HOW TO MQTT SERIES -----------------

ESP8266 Publish/subscribe to Cloud | MQTT:

----------------------

-~-~~-~~~-~~-~-
Please watch: "How to Set Up Wokwi for IoT Simulation in VS Code with PlatformIO"
-~-~~-~~~-~~-~- -----------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------

[muhammadroby]

Great content ever on MQTT scope, thank you so much bro. I hope this channel will bigger in the future.

[nguyenhuyminh]

It seems it does not run function:
client.connect({
onSuccess: onConnect
});

[GChriss]

i followed your step and i get an error about trying to conect to the insecure websocket endpoint

[danielapetroaie]

You can integrate in project Google home?

[valentinasalazar]

i've using the same code, and show me a error "mqttws31.js:141 Uncaught Error: Unknown property, passwordId. Valid properties are: timeout userName password willMessage keepAliveInterval cleanSession useSSL invocationContext onSuccess onFailure hosts ports mqttVersion mqttVersionExplicit uris
at d (mqttws31.js:141:12)
at M.connect (mqttws31.js:1705:4)
at startConnect (demo.js:18:12)
at HTMLInputElement.onclick (index.html:24:74)"