Publishing MQTT Data to to a Web Page

Although it may not be obvious the JavaScript MQTT client makes it easy to publish MQTT data to a web page on the Internet and also to create a control panel that you can host on the Internet.

Most Web applications currently use PHP as the scripting engine.

Although there are MQTT modules available in PHP ( I have never used them), and are probably not supported on most web hosts.

However modern web APPs also rely on JavaScript and Paho provide an MQTT JavaScript client.

In my tutorials on using this client we used a local web page without a web server.

However there is nothing preventing you from publishing this page on a website and making it available on the Internet.

What you need to remember with this arrangement is that the script is only running when you have the web page open in a browser.

This makes it unsuitable for use for MQTT applications that require a permanent connection e.g. data logging, event reporting.

However it is perfectly OK for displaying data or even controlling devices like turning a light on/off etc.

Demo Pages

I’ve created two pages that demonstrate how you can control MQTT devices using a web page and also how you can display MQTT data using a web page.

The pages are very simple HTML pages using tables for layout.

You should note that I am not a web page designer or developer and so they are very simple pages for illustration purposes.

The display web page displays data from two sensors sent over MQTT.

The data is created by the control web page.

You can upload this pages to a web server or use them locally.

If using a web server the server doesn’t require PHP support.

 Demo Script Download

Display MQTT Data on A Web page Video

Related tutorials and Resources

• Using MQTT Over WebSockets with Mosquitto
• Using The JavaScript MQTT Client With Websockets