How to make real time web application
Real time web application means displaying live or current or present data on a webpage without refreshing the webpage. Here we will see how to make real time web application using MQTT WebSockets.
Real time web application
Please follow the following steps to make real time web application using MQTT WebSockets.
1)In order to make a real time web application using MQTT WebSockets, you need to install WebSockets over MQTT. If you do not know how to implement WebSockets over MQTT please click on the below link.
2)Assuming you have successfully implemented WebSockets over MQTT.
3)Now download the following HTML code which will receive the data from MQTT publisher and update received on HTML webpage without refreshing the webpage.
WebSocket Client (1525 downloads)
4)Now please unzip the downloaded file and open the downloaded HTML file with any editor and modify the following things.
hostname: Enter the IP address of system on which MQTT broker is running. Example: hostname:192.168.0.93 where 192.168.0.93 is the IP address of the system on which MQTT is running.
topic: Please enter the topic name which you want subscribe. example topic:test where test is the topic on which publisher is publishing data.
Note: In downloaded code, host name is localhost means MQTT broker and WebSocket client both are running on the same system. If your MQTT broker and client are running on different systems then please enter host name as the IP address of the system on which MQTT broker is running.
5)Now run the HTML file by clicking on it.
6)Once you run the HTML file you will see the following thing in browser
7)Now publish the data and see the changes in browser. So here we will use command prompt as the MQTT client to the publish data.
8)Now once you publish the data, check the web page opened the browser to the updated value which is shown below.
9)Now if you refresh the page you will not able see the last received or updated value. So if you want to see the last received or updated value on your webpage then please publish data with retention which is shown below.
10)Now if you refresh the webpage, still you will able to see the last received or updated value.
Common Doubts / Problems
1)Can I publish data using another MQTT clients?
yes, you can publish data using Another MQTT clients such as Python as MQTT publisher, ESP8266 or NodeMCU as MQTT publisher and Java as MQTT publisher, etc. Please click on the below to know, how to use python as MQTT client, how to use ESP8266 or NodeMCU as MQTT client, how to use Java as MQTT client, etc.
Python as Publisher and Subscriber
ESP8266 as MQTT publisher and subscriber
Java as MQTT publisher and subscriber client
2)Am I need to refresh the webpage to see the latest published data?
No need to refresh the webpage to see the latest published data. It will automatically update on the webpage.
3)Are you getting Error, A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond at the time of publishing?
If you are getting error like a connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond then please click on the below link because it occures one the five reasons which are given in the following link.
Installing MQTT Broker on Windows
4)If you are having any issue while implementing this, please do comment. We will help you.
Please click on the below link to become master in MQTT.
Great tutorial! But it seems the the yellow bar isn’t responding to messages.
I set up 2 terminal windows: one with pub another with sub, and I also opened the websocket.html
What could be the cause ?
Using Mosquitto, however in the js file you use paho client ?
1) Have you implemented mqtt websockets?
If you have implemented websockets then please restart the mosquitto and then check.
2)are you publishing data on correct topic.
Please follow step number 7 from command prompt to publish data.
1) Websockets were implemented by adding
found the problem:
I accidently added space to the line in the src link
Youre awesome! thx