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.
  • 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.

javascript-websocket-example-code

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.

console-logging-firefox

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:

websockets-script-1-run


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:

callbacks-added


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.:

on-fail-javascript

The onMessageArrived function extracts the message and topic and logs them


msg-arrived-function

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:

failed-connection-attempt

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

mqtt-pub-sub-javascript

Practical example

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

We will create a we page application like the one below

websockets-javascript-example

Which we can use for broker testing.

Resources:

Related Tutorials

Please rate? And use Comments to let me know more
[Total: 3    Average: 2.3/5]

6 comments

Leave a Reply

Your email address will not be published. Required fields are marked *