MQTT and Java script Hello and welcome to High Voltages. In this video we are going to talk about MQTT
AGAIN !!!! In this video, I will teach you how you can
create a basic web application using MQTT protocol. For this, we will be working on HTML, CSS
and Javascript, So you can say that this tutorial will teach you how to make a MQTT web application
or web dashboard using HTML CSS and Javascript. We will not be focusing much on the HTML and
CSS side, and will be mainly talking about the functionality or backend using java script. the frontend in this video but it's going
to be really simple and we will not be diving in the details. But obviously you can create a nice looking
dashboard. Without further delay, let's start with a
question: why do we need a web app for the MQTT project? You can control your MQTT devices from Mobile
apps and dashboard, So why do we need a browser? By the way, I have uploaded the tutorial for
both. Links will be in the description. A browser is installed on nearly every desktop
computer/laptop/tablet/smartphone around the world and also it would be nice if you could use
one standardized protocol to get messages on all types of devices, browsers, tablets,
smartphones, embedded devices, sensors, etc. Another question before starting the main
code: How MQTT works on the web. To use MQTT we will use websockets and without
it we cannot see the mqtt data on a browser. What are web sockets ? Websockets is a computer communication protocol,
and provides full- duplex communication i.e. both ways over a single TCP/IP function and
since we all know our browser uses http or secure http for communication, websocket is
associated with http, as it uses it for initial connection establishment. The client and the server or both devices
start their connection using http and then upgrade to websockets. Coming back to our last question, how can
we use MQTT in the browser and how is it different from normal MQTT messages ? I have explained the flow of normal MQTT messages
in detail but in short it works on the publish/subscribe model and if we use MQTT on websockets then
MQTT messages are placed into websockets and then it is sent to client, where client first
unpacks the MQTT message from the websocket and then it is processed as a normal mqtt
message. Now you know how we can use MQTT in a web
browser. Let's write code for the web app. But before that I would like you to subscribe
and like this video. Also, Questions are welcome in the comments. Since this project can be used to control
your ESP32 , raspberry pi , sensors etc, and you would like to get a PCB which will save
you hussle of wiring. Consider PCBWAY.com, who is sponsor of this
video. PCBway also provides the CNC services and
they are experts in their field. You will find the link to their website in
the description. Okay so we are in visual studio code and lets
start by creating a new file index.html And now lets create a basic structure of html
file We have created a basic structure and now
lets create a form , since we will need the form to get the broker address, port number,
topic to subscribe and publish and also we will need buttons to connect, disconnect and
publish message. So let's quickly do that So what i have done is created some edittext,
buttons and labels. I have assigned them the ids and values, and
if you would like to know the full explanation of code, you can check the blog in the description. Now in the header tag we will create a meta
tag and a title tag, Now lets create style.css file and connect
to our html file, Now we need to add the Pahomqtt library so
we will add that in the script tag and using that script we will be able to use all the
functionalities of mqtt in javascript. Also create a new javascript file and connect
it to our html code, What i have done now is added a div for showing
mqtt messages and i have added a css file to make the webapp look good, i am not going
in the details but you can find the code from the description Our app looks like this after adding the CSS
files. Now lets work on our java script file, which
is the main thing for publishing and subscribing to mqtt messages. So lets first create a function that will
help us connect to the broker when connect button is pressed. Also we will need a function when disconnect
button is pressed. We will also need a function for publishing
a message. So now we will create a variable client ID
which will generate a random client id using the random function And then we will create the variables for
host, port username, password. And then we will read these values from the
form or user interface using the ids we have given to them. Now we will show in the message box that we
are connected to the mqtt broker by editing the inner html of the div box. And also show the client id that has been
generated. Now we will use the functionalities of the
mqtt library and will create a variable called client which will call the client function
of the library and we will pass some variables like host, port and client id. Now we can use the variable client to use
other functions of the library, so we will set some functions such as on connection lost,
on connection We will create a on connection loss function
as well under this function. And we will write to the message box that
the connection is lost . And then we will see why the connection is
lost by reading the error response and print it on the message box. Similarly we will connect another function
to the client variable, OnMessage function which will be called when there is a message
on our subscribed topic. Then we will create a function onMessage which
will have an argument message. In the function we can first print the message
to the console. If you want to do some controlling on message
, you can do here in this function. And then we can print the message and the
topic name in the message div box. And now lets go back to our main function
and write code for connecting to mqtt broker So we will write client.connect and in it
we will say on success, which will be called when we are successfully connected to mqtt
broker, and her we call the onconnect function. And now lets make on connect function and
when we are connected to broker we can subscribe to a topic, so lets read the subscription
topic from the html form And then lets print it in message div box Lets subscribe to it by calling client.subscribe
function. We have made a mistake, there are two onConnect
functions, lets change the name of first onConnect functions to start connect and similarly onDisconnect
to startDisconnect. And then lets add these function to our html
buttons input by adding the onClick function so that these functions can be run when we
click on the buttons. Also we need to add the parentheses in the
end of function name. Lets run the program and check the console. I used the lower case for paho we need to
change that. Now lets test again using the free mosquitto
broker. You can see we have started to receive messages
, since we have subscribed to all the topics and it is free broker so we are receiving
messages from all the topics. Now lets edit the startDisconnect function
so we can disconnect from the broker, we will add client.disconnect(). And then we can print on messages box that
we have disconnected from the broker. Now lets write code for publishing a message. First we can read the message and topic name
entered in the form in a variable. And then we will create object for sending
a message and we will call the Message function from the library and we will pass our msg
value. And then we will add the publish topic by
assigning the value to destinationName variable. And then we can publish a message. Now lets test it. We will subscribe to hv topic and send hi. We have received the message on this topic
, here. Now lets add the username and password And it will be added in the client.connect
function like this and like this you can connect to the brokers with username and password. In the end, I am going to give you an overview
of the library which we are using. So you can see this is the mqtt client function
and we need to pass host port client ID and we are using this function here. The documentation is really simple i will
give the link so you can read more about it. So thats it for this video, i will see you
in next video. Please write your questions in the comments.
