MQTT入门（10）- MQTT与WebSocket

最新推荐文章于 2024-06-03 14:19:33 发布

wayne_ren

最新推荐文章于 2024-06-03 14:19:33 发布

阅读量2.9k

点赞数

分类专栏：物联网文章标签：网络 javascript ViewUI

物联网专栏收录该内容

10 篇文章 5 订阅

订阅专栏

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

MQTT本省和WebSocket没有什么关系，但是Broker可以处理WebSocket里的MQTT包。
[img]http://dl2.iteye.com/upload/attachment/0128/4477/d794a0f9-49a8-35cf-a0c5-83f9ca280631.png[/img]

[b]设置Mosqiutto Broker[/b]
/etc/mosquitto/mosquitto.conf

listener 1883
protocol mqtt

listener 9001
protocol websockets

重启服务器后，Broker就同时支持一下两种访问形式:
[quote]tcp://localhost:1883
ws://localhost:9001[/quote]

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

[b]ws.html[/b] 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>

[b]ws-paho.html[/b] 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的消息都可以正确处理。
[img]http://dl2.iteye.com/upload/attachment/0128/4460/cf5c654d-411b-3c2c-9aeb-59612134053b.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0128/4462/bd27c59f-7ff9-37cf-bdbf-6a5db1880982.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0128/4464/1a4beacc-b131-3308-900b-f7f4f56f91fb.png[/img]

查看一下websocket的HTTP和Packet：
[img]http://dl2.iteye.com/upload/attachment/0128/4466/51082975-e23d-3097-a61b-d6a1fa2a0409.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0128/4468/a1cbab93-82ef-357c-b05e-005a5fc526c6.png[/img]

wayne_ren

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
MQTT入门（10）- MQTT与WebSocket

基于浏览器的Web应用，一般都是通过JavaScript来和服务器进行交互，这时可以采用基于WebSocket的MQTT。大部分Broker都支持MQTT over WebSocket。这样做的好处在于可以很好的利用浏览器的WebSocket，而服务端无需在开放80/443以外的端口。MQTT本省和WebSocket没有什么关系，但是Broker可以处理WebSocket里的MQTT包。...
复制链接

扫一扫