Build your own Javascript MQTT Web Application

Why should I use Websockets with MQTT

With the new features introduced with HTML5 you can now even build websites which behave like a native desktop applications and work on tablets and smartphones the same way they do on a desktop computer. So using a browser like any app on any other mobile device is a very tempting idea. A browser is installed on nearly every desktop computer/laptop/tablet/smartphone around the world. And honestly wouldn’t it be nice if you could use one standardized protocol to get real push messages on all types of devices, browsers, tablets, smartphones, embedded devices, sensors, etc. The protocol you are looking for is MQTT and it is very simple and quick to implement.

How to use MQTT with websockets

For a simple websockets client which subscribes and publishes to a MQTT Broker, there are very few steps involved to get it up and running. It is actually pretty simple because there is a very good library available which already does most of the work for you, the Paho Javascript client.

To check that your code is working you can use the HiveMQ Websocket MQTT Client and publish/subscribe to the same topics as in the example code.

And if you don’t want to setup your own MQTT broker you can always use the public HiveMQ broker from the MQTT-Dashboard.


First of all we want set up a connection to the MQTT Broker. This is done by creating a Messaging.Client Object and calling the connect method with a set of options.


Subscribing to one or more topics is done by a simple call to the subscribe method of the client


Publishing to a specific topic requires you to create a Messaging.Message object and pass it to the publish method of the client


You can also check out the fullscreen demo or play with the JSFiddle.

Note: If you instantly see a few messages after you hit the subscribe button, these are so called retained messages. This means that the last message which has been sent to the broker for this topic which had the retained flag set will be persisted on the server and sent to every new subscriber to this topic. A pretty nice extra if you always want to have access to the last sensor reading that was published to the broker for example.

Additional Goodie

A very cool feature of MQTT is the ability to specify a so called Last-Will-And-Testament Message and Topic. Whenever a connection gets disconnected unexpectedly the broker will publish a message to a topic which was specified by the client on connect. In the websocket scenario this allows you to act on a closed tab/browser by reacting to the LWT message which was sent by the broker. You can set the LWT topic, message, etc. by passing additional properties in the options for the connect method.

P.S. There’s a HiveMQ Support Forum available if you need any help setting up your own HiveMQ instance for your MQTT Push.

P.P.S. The demo is available as one single html file here: hivemq_websocket_demo_app.html


  1. Martyn Eggleton says:

    Hi I’m trying the jsFiddle as I’m keen to let my students at school loose on MQTT and I’m getting this message when trying to connect “Connection failed: AMQJS0007E Socket error:undefined”. The forum isn’t loading for me and I’m a bit stuck. any thoughts?

  2. Hi Martyn,

    We did a short maintenance update on our public broker yesterday. So maybe that’s why it didn’t work. Can you please try again now.

    If it’s still not working, here is the link to the support forum:!forum/hivemq

    Hope that helps,

  3. Karthikeyan says:

    The demo available as single html file isn’t working even if I open directly on the browser. But it is working if I use the embedded one or from JS fiddle. I am new to JS. Please advise.

    Thank you!

    1. Hi Karthikeyan,

      it seems there has been an update to the Paho JS library and therefore our application is not working anymore. I have corrected the single html file to use the right library.

      We’ll update the code to the newest version shortly.

      Hope that helps,

  4. Gavin says:

    Hello,I connected the server correctly in the browser, but got a wrong ‘timed out’ in React Native. The wrong is ‘Object {invocationContext: undefined, errorCode: 1, errorMessage: “AMQJSC0001E Connect timed out.”}’.

    Thank you!

    1. Hi Gavin,

      we don’t have any experience with react-native. The error indicates that the connection could not be established to the HiveMQ broker. Can you share a Gist with the relevant code?

      Dominik from the HiveMQ Team

Leave a Reply

Your email address will not be published. See our Privacy Policy. Required fields are marked *