How To Communicate An ESP32 With A Web Page Through MQTT

Communicate An ESP32 With A Web Page Through MQTT : New entry on communication with the ESP8266 and ESP32. This time we have to see how to communicate with a web page served from ESP32 through MQTT .

We have already seen How to use asynchronous MQTT and How to send text in Json format through MQTT . These communications were between devices, between backends. Now we want to communicate it with a web served to the client, with the frontend.

This is not usually (or should not be) so frequent, because we have many ways to communicate an ESP8266/ESP32 acting backend with the frontend. Thus we have seen Ajax calls and communication by Websockets .

But, if our system is using MQTT, it can be useful to use the same system to inform the frontend. So ultimately, we want to make a web client for the MQTT protocol , and serve this client from ESP32 itself.

This is where we find the first problem, how can we communicate a web page, which lives in its “web world” of HTTP calls, with an MQTT communication.

Communicating A Website By MQTT

A web page communicates through HTTP, which is a protocol that acts on the Application layer (layer 7 of the OSI model). This, in turn, operates on TCP which acts on the transport layer (layer 4). That is, except for certain exceptions or changes in the future (HTTP 3?) a web page can only communicate through HTTP requests, websockets, or WebRTC .

And how does MQTT fit into this? MQTT is also an Application layer (layer 7) protocol that generally operates over TCP/IP. In short, MQTT shoots directly against a socket and will not enter an HTTP request.

So we can’t connect them? Well here come websockets to the rescue. We can configure MQTT to work over websockets , which, as we have said, we can manipulate from a web page.

But first we need to configure our broker to accept websockets. Whether this is possible, or how to configure it, will depend on the broker we are using. In the rest of the post we are going to see it as if we had a local installation of Mosquitto as we saw in this post .

And, on the other hand, we are going to need a JavaScript library that allows us to read this MQTT communication through websockets from the served web page.

Configure Mosquitto To Use Websockets

If we are using Mosquitto as an MQTT broker, communication via websockets is disabled by default. So we must activate it in the configuration to be able to communicate from a web page.

To do this, we edit the ‘mosquitto.conf’ file, which you will have in the folder where you have installed Mosquitto. Here find the “Extra listeners” section and uncomment the websocket lines, removing the ‘#’ symbol from the beginning of the line.

So we have added an extra listener for Mosquitto, through websockets acting on port 9001.

Paho Javascript Client Library

The other component we need for our communication is a JavaScript library for MQTT. There are several libraries, but the most used is the Eclipse Paho JavaScript Client library .

It is a library that is available in several languages, including Java, JavaScript, Python, C/C++, Rust, and Golang. More information on the project page https://www.eclipse.org/paho 

Also Read : Advertising Campaigns On Twitter

Let’s Go To The Code

Now that we have configured our broker to accept websocket communication, and with our Paho JS Client library, it’s time to put it all together to see an example.

The program that we will upload to ESP32, in charge of making the MQTT communication, is basically the same as the one in the previous entry. Therefore, we are only going to comment on the differences, and in case of doubt you can consult the previous tutorial.

The code of the main loop of the program is as follows.

Where the difference is that we have added a call to ‘InitServer()’ to be able to serve the web page from the ESP32. In addition, we have added the relevant includes.

The other difference is the ‘Server.hpp’ file, where we have put the logic associated with serving the web page.

We are simply serving a web page from SPIFFS, something that we have already seen in the rest of the entries in the series.

Now let’s get to the really new stuff, which is the page we’re serving, and that should act as an MQTT communication client. In file ‘index.html’ it would have the following form.  

Notably, in the ‘onConnect()’ method we subscribe to the ‘hello/world’ topic. For its part, the ‘onMessageArrived’ method receives a text formatted as JSON, parses it, and uses a bit of vanilla JavaScript to add the content of the message to the web page. The rest of the functions in this example only show the debug data on the console.

Finally, we have the logic of our page in the ‘app.js’ file that has the following form.

As we can see, we have defined an MQTT client with the Paho library, where we specify the address of our broker, the listening port for websockets, and a unique identifier for the client.

For the identifier we have used a function that generates GUID randomly, although we could have used any other, as long as we do not repeat the client identifier.

Finally, we have associated each of the MQTT client events to our functions in the ‘API.js’ file

With this, we upload both the program and the web to the ESP32, execute everything, and access the web page served from the ESP32. If everything has gone well , we will see the received messages appear , which will be added to the served web page.

In this example it simply contains the value of Millis(). Logically, in a real project the data in JSON format would contain more information. We will see this in the last entry of the series. But first, in the next one we will see how to do this using VueJS. Until next time!

Also Read : Boost Your Sales With Emailing