Using The JavaScript MQTT Client With Websockets

Web browsers use the http protocol and modern ones can also use websockets.

However web browsers don’t have MQTT support built in.

To publish and subscribe to an MQTT broker with a browser you will need to use a JavaScript MQTT over websockets client.

See the MQTT over websockets if you’re not familiar with MQTT over websockets.

This client enables you to create web Apps that use the MQTT protocol for displaying and sending data.

In this tutorial I will take you through a example script that publishes messages and subscribes to topics using MQTT and websockets.

The JavaScript MQTT over websockets client code can either:

• Be downloaded from the Paho website, and put it on your local server/PC
• Simply used by inserting the following code in your web page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>

Details of both methods including download links are  here.

JavaScript MQTT vs MQTT over Websockets

There are two JavaScript MQTT clients.

• A JavaScript MQTT client which works with Nodejs. See Using the Node.js MQTT Client-Starting Guide
• An MQTT over Websockets JavaScript client which works in a web browser.

Using the JavaScript Websocket Client

Note: If you prefer video then see  Using the JavaScript MQTT client- Example 1

The first thing you will need to do is create a basic web page.

An outline structure is shown below:

We will now create a simple script that connects to a broker and publishes a message.

Note: In the example we will keep the HTML and JavaScript as simple as possible.

A screen shot of the script is show below:

Note: scripts used in this tutorial can be downloaded here.

Running the Script

To run the script copy it into a file called websocks.htm and double click to run it.

There is no need for a web server as it runs locally.

However it does need access to the Internet to import the MQTT Javascript client.

When you load the page a call to the MQTTconnect function is made ( bottom of the page in code above)

The MQTTconnect sets up the connection and importantly sets the onsuccess callback.

The onConnect function is called when the connection is successful.

Note: you can assign an on fail function as well but I haven’t done so to keep it short.

You can only subscribe and publish when the connection is established which is why many scripts will subscribe and publish in the onConnect function.

I have commented out the subscribe call in the above script.

Script Output

To view messages you will need to enable console logging on Firefox click tools>web developer>web console.

Not much happens when you run the script and you will need the console log screen to see the output. Which I’ve shown below:

---

If you are running your own local broker then you will see the connection, and publish from the client as shown above:

Important Notes:

1. Don’t use document.write anywhere in the script! Always use console.log to see messages.

Publishing, Subscribing and Receiving Messages

Now we will modify the script to:

1. Subscribe to a topic
2. Process any received messages.
3. Handle connection failures

First we modify the connect function to add callbacks for failure and message received. The modified function is shown below:

---

Now we create the two functions.

The onFailure function shown below logs a message and attempts a reconnect every few seconds set by the reconnecttimeout variable.:

The onMessageArrived function extracts the message and topic and logs them

---

Notice we use the payloadString method as the received data is text, if it was binary e.g. an image file then we would need to use the payloadBytes method.

Now we uncomment the subscribe call in the onConnect function to complete the changes..

Now if we run the script and simulate a failure by using the wrong port number we get the result below:

Now we run the script using the correct port and we get our published message  logged to the console

Video-Using the JavaScript MQTT client –

Practical Example

In Video 2 we will create a web page application like the one below:

Which we can use for broker testing.

Using Websockets over SSL

If your broker supports websockets over SSL then you can make a simple change in the connect function (useSSL:true) to use it.

In addition you also need to use the same name for the host as is configured on the server certificate. In my case I need use steve-laptop and not the IP Address

If you use your own CA certificates the browser may give an untrusted connection dialogue which you can safely override.

Important Note: Your browser must have the CA certificate installed for this to work. If you are not prompted to install the CA certificate and you are using your own CA certificate and it fails then you will need to import the certificate.

This tutorial has details on how to configure Mosquitto for websockets over SSL

Note: You can also use the external online test broker
test.mosquitto.org using port 8081.

Note: This worked OK on my Ubuntu installation that used Libwebsockets 1.7.1. It didn’t work on my Raspberry pi which uses Libwebsockets 2.

You can add websockets logging to the mosquitto configuration file use:

web_sockets_log_level 6

if that isn’t showing enough details then use a higher level e.g. 14

Resources:

Example Scripts

Related Tutorials

• MQTT websockets JavaScript docs
• HiveMQ using the Javacript client.
• IBM-How to program messaging apps in JavaScript

Related Tutorials

• Understanding MQTT Over websockets
• Using the Paho Node.js MQTT Client-Starting Guide