MQTT入门（10）- MQTT与WebSocket

程序员文章站 2022-05-01 09:17:57

...

基于浏览器的Web应用，一般都是通过JavaScript来和服务器进行交互，这时可以采用基于WebSocket的MQTT。大部分Broker都支持MQTT over WebSocket。这样做的好处在于可以很好的利用浏览器的WebSocket，而服务端无需在开放80/443以外的端口。

MQTT本省和WebSocket没有什么关系，但是Broker可以处理WebSocket里的MQTT包。
MQTT入门（10）- MQTT与WebSocket

博客分类：物联网

设置Mosqiutto Broker
/etc/mosquitto/mosquitto.conf

listener 1883
protocol mqtt

listener 9001
protocol websockets

重启服务器后，Broker就同时支持一下两种访问形式:

引用

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

测试代码
mosquitto和paho都已经封装好了这部分代码，直接下载下来用即可。

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>

挨个执行所有的connection，再挨个执行subscribe，最后挨个publish消息们，可以看到，无论是websocket还是mqtt的消息都可以正确处理。
MQTT入门（10）- MQTT与WebSocket

博客分类：物联网