Tutorial mqtt.js, the Javascript MQTT client - how to connect your browser to Home Assistant

Here I will show how to easily establish a connection to an MQTT broker from a web browser. I will use an off-the-shelf MQTT library that connects to the broker via a WebSocket mechanism and demonstrate how it can be used to receive and send data via Mosquitto installed together with Home Assistant.

Note: This presentation is about JS scripts running on the client side, i.e. in the browser itself. No Node.js or any similar mechanisms are needed here. All you need is a bulk HTML file running without any server, this will even work with static hosting such as GH Pages from GitHub.
Web browsers do not offer the possibility to establish a direct connection over TCP, so MQTT.js uses a mechanism called WebSocket. Fortunately, Mosquitto from HA used for presentations also supports WebSockets, although you may need to configure this in mosquitto.conf.

Note - the full code is in the appendix!

We start the adventure in HTML code - you can help yourself here with AI tools, so that you can quickly assemble the whole thing based on ready-made CSS styles, for example from Bootstrap. However, we are interested in MQTT itself. We include the library first:

Here you will need to provide the username and password for our MQTT server. Note that everything will be visible in the page source to the client, so this approach won't work in some situations, but here I don't see it as a problem. I simply gave the user a field to enter their own information:

Now you have to handle the 'Connect' button, i.e. make the connection. The whole thing boils down to retrieving data from the DOM objects at the time of clicking:

The link is created with the ws prefix, which is the WebSocket standard. A username and password are given as arguments. Once the connection is initiated (the connect function is non-blocking), callbacks can be set to handle various MQTT events. Here is an example implementation for a demo site:

That leaves two operations that cannot be done via callbacks. First, the subscription for the topic (start listening):

Then publishing data on the selected topic:

That's basically all of the implementation.

Now it's time for demonstrations .
Firstly the connection - once you have entered the correct details it should all work first time. I didn't have to configure anything in HA, I already had WebSockets support enabled there. I simply specified a port one larger than the one used for MQTT over TCP.

It is now possible to check that our site can see what Home Assistant publishes:


Then it remains to test the other way - site publishes, HA receives:



In summary , the support of the WebSocket standard in MQTT allows us to connect to the broker from a browser. In this way, we obtain full-fledged communication, including the ability to listen and publish data. Executing server-side scripts is then unnecessary - static HTML hosting is sufficient.
The example shown here could be expanded and made into a full sample device controller, but that's for another time.
Do you see a use for an MQTT connection established from the browser (client) level?

Full demo program attached - no server needed, you can download the HTML file and run it loosely from disk, or put it on some static hosting.