Introduction to MQTT (10) - MQTT and WebSocket

Browser-based web applications generally interact with the server through JavaScript. In this case, MQTT based on WebSocket can be used. Most brokers support MQTT over WebSocket. The advantage of this is that you can make good use of the browser's WebSocket, and the server does not need to open ports other than 80/443.

MQTT natively has nothing to do with WebSocket, but Broker can handle MQTT packets in WebSocket.

Set up Mosqiutto Broker
/etc/mosquitto/mosquitto.conf

listener 1883
protocol mqtt

listener 9001
protocol websockets

After restarting the server, Broker supports the following two access forms at the same time:

quote

tcp://localhost:1883
ws://localhost:9001

The test code
mosquitto and paho have already packaged this part of the code, just download it and use it.

ws.html http://mosquitto.org/js/mosquitto-1.1.js

<!DOCTYPE HTML>
<html>
   <head>
      <script type='text/javascript' src='mosquitto-1.1.js'></script>
      <script type="text/javascript">
         var mosq = null;
         var url = "ws://localhost:9001/";
         var topic = "test/rensanning/ws";
         var time = 0;
         function conn() {
            if ("WebSocket" in window) {
               console.log("WebSocket is supported by your Browser!");
               mosq = new Mosquitto();
               mosq.connect(url);
               mosq.onconnect = function(rc) {
                console.log("CONNACK " + rc);
               };
               mosq.ondisconnect = function(rc) {
                console.log("Lost connection");
               };
               mosq.onmessage = function(topic, payload, qos) {
                console.log("PUBLISH " + topic + " " + payload);
               };
            } else {
               console.log("WebSocket NOT supported by your Browser!");
            }
         }
         function sub() {
             mosq.subscribe(topic, 0);
         }
         function pub() {
             time = time + 1;
             var msg = "ws test by mosquitto-1.1.js. " + time;
             mosq.publish(topic, msg, 0);
         }
      </script>
   </head>
   <body>
      <div>
         <a href="javascript:conn()">connection</a><br/>
         <a href="javascript:sub()">subscribe</a><br/>
         <a href="javascript:pub()">publish</a>
      </div>
   </body>
</html>

ws-paho.html https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js

<!DOCTYPE HTML>
<html>
   <head>
      <script type='text/javascript' src='mqttws31.js'></script>
      <script type="text/javascript">
         var client = null;
         var url = "ws://localhost:9001/";
         var topic = "test/rensanning/ws";
         var time = 0;
         function conn() {
            if ("WebSocket" in window) {
               console.log("WebSocket is supported by your Browser!");
               client = new Paho.MQTT.Client(url, "ClientId");
               client.onConnectionLost = onConnectionLost;
               client.onMessageArrived = onMessageArrived;
               client.connect({onSuccess:onConnect});
            } else {
               console.log("WebSocket NOT supported by your Browser!");
            }
         }
         function sub() {
             client.subscribe(topic);
         }
         function pub() {
             time = time + 1;
             var msg = "ws test by mqttws31.js. " + time;
             var message = new Paho.MQTT.Message(msg);
             message.destinationName = topic;
             client.send(message);
         }
         function onConnect() {
            console.log("CONNACK");
         }
         function onConnectionLost(responseObject) {
            console.log("Lost connection");
            if (responseObject.errorCode !== 0)
              console.log("onConnectionLost:" + responseObject.errorMessage);
         }
         function onMessageArrived(message) {
            console.log("PUBLISH " + message.destinationName + " " + message.payloadString);
         }
      </script>
   </head>
   <body>
      <div>
         <a href="javascript:conn()">connection</a><br/>
         <a href="javascript:sub()">subscribe</a><br/>
         <a href="javascript:pub()">publish</a>
      </div>
   </body>
</html>

Execute all connections one by one, then execute subscribe one by one, and finally publish messages one by one, you can see that both websocket and mqtt messages can be processed correctly.

Check out websocket's HTTP and Packet:

Introduction to MQTT (10) - MQTT and WebSocket

Guess you like