Lab-54: MQTT over WebSocket

by sunnynetwork

In the Lab-46 we learned about MQTT protocol. In this lab we will learn how to use MQTT over WebSocket. So why do we need  MQTT over WebSocket ?. It is to support MQTT on browser

WebSocket

WebSocket is web transport protocol. It is an upgrade from HTTP protocol. HTTP protocol is still in use but replaced by WebSocket in many applications. HTTP worked best for request and response type communication, where a browser request for data and server respond with data. A unidirectional communication. A polling mechanism was introduced in HTTP where client (browser) continuously poll server for data. Like client asking server if it has something to send. which was not very efficient. WebSocket solves this problem by creating bi-directional connection between client and server. Now client and server can send data asynchronously. This is very useful for web applications like Chat where client and sender can send/receive data

In order to support MQTT broker and client on web browser we need to run it over WebSocket. So in this lab instead of running MQTT client on Linux machine we will be running  it on web browser. Similarly we will be using web based MQTT broker

Pre-requisite:

  1. Windows 10 laptop
  2. Paho-mqtt javascript library

Procedure:

Step-1. Download Paho-mqtt javascript library

  1. Go to this link and download zip file to you pc
  2. Unzip the file. There will be  mqtt-ws31.js file under ‘paho.mqtt.javascript-master\src’

Step-2. Open a notepad and paste below code. Save it as index.html file. This code simulates MQTT client over WebSocket. It will create connection to MQTT broker and publish a message

In this lab we will be using MQTT cloud broker at ‘broker.mqttdashboard.com’

invoke paho-mqtt client library. Give the full path where mqtt-ws31.js file is located

 

Below code creates connection to broker ‘broker.mqttdashboard.com’ on port 8000 and provide a client-id

// Create a client instance
 client = new Paho.MQTT.Client("broker.mqttdashboard.com", 8000, "clientId");

Add your topic name here

message.destinationName = "divinelife/topic/1";

Below complete code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>MQTT over Websocket</title>
</head>
<body>
    
Message published to Cloud MQTT broker

    
    
    
    // Create a client instance
    client = new Paho.MQTT.Client("broker.mqttdashboard.com", 8000, "clientId");           

    // set callback handlers
    client.onConnectionLost = onConnectionLost;

   // connect the client
    client.connect({ onSuccess: onConnect });

   // called when the client connects
   function onConnect() {
            // Once a connection has been made, make a subscription and send a message.
            console.log("onConnect");
            var msg = "Hello Cloud MQTT from DivineLife"
            message = new Paho.MQTT.Message(msg);
            message.destinationName = "divinelife/topic/1";
            client.send(message);
        }

 // called when the client loses its connection
        function onConnectionLost(responseObject) {
            if (responseObject.errorCode !== 0) {
                console.log("onConnectionLost:" + responseObject.errorMessage);
            }
        }


</body>
</html>

 

Step-3. Go to this link to access web based broker

Click on Connect. leave other fields as it is

mqtt-ws-1

Click on ‘Add New Topic Subscription’ under Subscriptions to subscribe to a topic. Enter topic name , this is the same topic we will be publishing using javascript program.  click on ‘Subscribe’.

mqtt-ws_2

Step-4. Execute javascript program we created in step-2. I am running it in Google Chrome. Open a new tab and type ‘file:///C:/’ , navigate to your  program ‘index.html’ and click on it. It will execute program and send message to broker.

Note: If you need to see console debug messages or debug script, press F12 on Chrome browser and click on Console tab

mqtt-ws_5

Check message in broker, you should see below message under Messages

mqtt-ws_6

 

Let’s see what’s happening under the hood

First browser asked server to upgrade to WebSocket and use mqtt as sub-protocol (Sec-WebSocket-Protocol). This is a way of telling the server to use WebSocket protocol instead of HTTP

mqtt-ws_4

Server respond back and agree to upgrade to WebSocket protocol and sub-protocol as mqtt

mqtt-ws_4

After initial handshake, browser sends MQTT packet encapsulated in WebSocket.

CONNECT message from client

mqtt-ws_10

CONNACK from broker

mqtt-ws_11

PUBLISH from client

mqtt-ws_12

 

 

 

Leave a comment