Using The JavaScript MQTT Client With Websockets

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

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

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 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 MQTTconnect 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

---

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

Practical example

In Video 2-Using the JavaScript MQTT client- Example 2

We will create a we 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.

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

Other Examples

This is a Mosquitto dashboard that dipslays data generating by an Mosquitto broker and published on teh $SYS topic.

The code is available on GitHub

https://github.com/sanjeshpathak/Mosquitto-Dashboard

and there is a demo here

http://rtsdp.eu5.org/dashboard/TestMosquittoOrgDashboard.html

Resources:

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

Related Tutorials

• Understanding MQTT Over websockets
• TCP/IP protocol suite explained
• Using the Paho Node.js MQTT Client-Starting Guide