Understanding the requirements

Now, we want to be able to control home automation in any web browser. Hence, we have to be able to send and receive MQTT messages in these web browsers. There are no W3C standards for implementing MQTT support in web browsers. No major web browser has implemented direct MQTT support. Luckily, MQTT over WebSockets makes it possible for us to encapsulate MQTT messages on WebSockets and use any modern web browser that supports WebSockets as a client for an MQTT server that also provides support for WebSockets.

Tip

Mosquitto provides support for MQTT over WebSockets. However, we must enable this support by making changes in the configuration file. In case you don't want to work with Mosquitto, you must make sure that the MQTT server you use provides support for MQTT over WebSockets to work with this example.

First, we will create a web page with HTML 5 and JavaScript code to generate an MQTT client that will act as a publisher and subscriber. We will connect...