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

Video Description

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. This video is sponsored by PCBWay, which expertise in PCB, 3d printing and CNC. Check thier website, there is some discounts going on : https://www.pcbway.com. Order your projects at fiverr: https://www.fiverr.com/users/emmiasim67/ ------------------------------------------------------------------------------------- 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 --------------------------------------------------------------------------------------- code and blog: https://highvoltages.co/iot-internet-of-things/how-to-make-mqtt-web-app-using-html-and-javascript/ ----------------- HOW TO MQTT SERIES ----------------- How To MQTT Series: https://youtube.com/playlist?list=PLGlKxZrcyaVDFqdtvZwfy326rurYZovuO ESP8266 WifiManager: https://youtu.be/VKqr-RDmRpY What is MQTT: https://youtu.be/DAOa4uuYaGQ Raspberry pi as MQTT broker: https://youtu.be/4LnxB_iJ380​ ESP8266 Publish/Subscribe local MQTT broker: https://youtu.be/7gjJfJgi6uE ESP8266 Publish/subscribe to Cloud | MQTT: https://youtu.be/eQvlHKTlYCE Arduino real-time plotting MATLAB: https://youtu.be/hk-RQgofyEw Arduino Real-time plotting PYTHON: https://youtu.be/COhkJwJtWG0 MQTT in MATLAB: https://youtu.be/ptdNuqGuf6E MQTT in Python : https://youtu.be/IQBWMHMTTO8 Real time plotting in PYTHON using MQTT : https://youtu.be/cP2kAaat3bI Android app MQTT: https://youtu.be/WAimZhU5phs ---------------------- #MQTTwebApp #MQTTWEBDASHBOARD #MQTT #HowtoMQTT Hire me on Fiverr: https://www.fiverr.com/s/z2dj0R -~-~~-~~~-~~-~- Please watch: "How to Set Up Wokwi for IoT Simulation in VS Code with PlatformIO" https://www.youtube.com/watch?v=9pTZL934k2s -~-~~-~~~-~~-~- ----------------------------------------------------------------------------------------------------------------------------------- 📞 Need help with my tutorials? Book a 1:1 call: https://topmate.io/asim_zulfiqar/ -----------------------------------------------------------------------------------------------------------------------------------