使用js连接mqtt

最新推荐文章于 2024-05-25 00:10:34 发布
最新推荐文章于 2024-05-25 00:10:34 发布
阅读量9.7k 收藏 14
点赞数 3
分类专栏： mqtt js 文章标签： mqtt js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011089760/article/details/90298678
版权
mqtt 同时被 2 个专栏收录
8 篇文章 1 订阅
订阅专栏
js
5 篇文章 0 订阅
订阅专栏

描述：使用javascript连接mqtt

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>ehz-app</title>
  </head>
  <body>
    <div id="app">
        {{ message }}
    </div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            message: 'connect to mqtt'
          }
        });

          var hostname = '10.10.14.235', //'192.168.1.2',
            port = 8083,
            clientId = 'test',
            timeout = 5,
            keepAlive = 100,
            cleanSession = false,
            ssl = false,
            // userName = 'test',  
            // password = 'test',  
            topic = '/helloMQTT';
        client = new Paho.MQTT.Client(hostname, port, clientId);  //创建mqtt客户端
        //建立客户端实例  
        var options = {
            invocationContext: {
                host: hostname,
                port: port,
                path: client.path,
                clientId: clientId
            },
            timeout: timeout,
            keepAliveInterval: keepAlive,
            cleanSession: cleanSession,
            useSSL: ssl,
            // userName: userName,  
            // password: password,  
            onSuccess: onConnect,
            onFailure: function (e) {
                console.log(e);
                s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onFailure()}";
                console.log(s);
            }
        };
        client.connect(options);
        //连接服务器并注册连接成功处理事件  
        function onConnect() {
            console.log("onConnected");
            s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onConnected()}";
            console.log(s);
            client.subscribe(topic);
        }

        client.onConnectionLost = onConnectionLost;

        //注册连接断开处理事件  
        client.onMessageArrived = onMessageArrived;

        //注册消息接收处理事件  
        function onConnectionLost(responseObject) {
            console.log(responseObject);
            s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onConnectionLost()}";
            console.log(s);
            if (responseObject.errorCode !== 0) {
                console.log("onConnectionLost:" + responseObject.errorMessage);
                console.log("连接已断开");
            }
        }

        function onMessageArrived(message) {
            s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onMessageArrived()}";
            console.log(s);
            console.log("收到消息:" + message.payloadString);
        }

        function send() {
            var s = document.getElementById("msg").value;
            if (s) {
                s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", content:" + (s) + ", from: web console}";
                message = new Paho.MQTT.Message(s);
                message.destinationName = topic;
                client.send(message);
                document.getElementById("msg").value = "";
            }
        }

        var count = 0;

        function start() {
            window.tester = window.setInterval(function () {
                if (client.isConnected) {
                    var s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", content:" + (count++) +
                        ", from: web console}";
                    message = new Paho.MQTT.Message(s);
                    message.destinationName = topic;
                    client.send(message);
                }
            }, 1000);
        }
        start();  //定时发送测试消息
        function stop() {
            window.clearInterval(window.tester);
        }

        Date.prototype.Format = function (fmt) { //author: meizz 
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "h+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[
                    k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
    </script>
  </body>
</html>

执行结果：

 

凤凰谷1
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js连接mqtt接口
Sun_blog
12-20 831
最近项目中用到了kafka接口，后来又改用了mqtt接口，今天就来记录一下js如何连接mqtt。主要是使用了mqtt.js这个库，使用 WebSocket 连接。
websocket连接MQTT服务器所用的js文件——mqtt.js和mqtt.min.js
07-24
mqtt.js库，下载后可以用找我要源码和压缩文件（mqtt.min.js），有问题随时请教
JS 连接MQTT的方法（mqtt.js的使用方法）
qq_17627195的博客
10-13 2万+
本文章是介绍 mqtt.js 的使用方法 本文章使用的版本是 4.1.x ，没用最新版的原因是 4.2.x 以上版本会报错，具体报错可以看我的另一篇文章。 使用的 4.1.x 版本地址：https://cdn.bootcdn.net/ajax/libs/mqtt/4.1.0/mqtt.min.js 如果遇到 无法连接/错误提示 WebSocket connection to …… 的问题，请看我另一篇文章，其中记录了我多次用到，遇见的连接问题。
JavaScript使用MQTT
baidu_34785556的博客
10-12 7818
提供mqtt在javascript上的应用实例。
mqtt.js v5.6.2 连接失败，websocket 报错问题
最新发布
u014679836的博客
05-25 160
看官方github文档，发现他把url解析了后没处理path。最终，在option中加上path后就可以正常连接了。
用JS WebSocket实现简单聊天
TwoBE9876的博客
10-19 1332
短轮询的实现思路就是浏览器端每隔几秒钟向服务器端发送 HTTP 请求，服务端在收到请求后，不论是否有数据更新，都直接进行响应。在服务端响应完成，就会关闭这个 TCP 连接，代码实现也最简单，就是利用 XHR， 通过 setInterval 定时向后端发送请求，以获取最新的数据。df优点：实现简单。缺点：会造成数据在一小段时间内不同步和大量无效的请求，安全性差、浪费资源。
使用Node.js连接和发布/订阅MQTT消息
polsnet的专栏
04-30 4497
在该示例中，首先使用mqtt.connect()方法连接MQTT代理，然后使用client.on('connect', callback)方法监听连接事件，当连接成功时，使用client.subscribe()方法订阅MQTT消息。该方法的第一个参数是'message'，表示监听MQTT消息，第二个参数是回调函数，用来处理收到的MQTT消息。其中，'mqtt://localhost:1883'是MQTT代理的地址，端口号为1883，'nodejs-mqtt-client'是客户端ID。
js使用ws协议连接mqtt demo，支持发布、订阅消息
09-01
5. 连接MQTT服务器： ```javascript client.connect(options); ``` 6. 发布消息： 当连接成功后，可以发布消息到特定主题。 ```javascript var topic = "your_topic"; var message = new Paho.MQTT.Message...
JavaScript开发Mqtt应用的MQTT库（mqtt.js,支持断开后自动重连）
04-30
用户端采用JavaScript开发Mqtt应用时，一般会采用第三方MQTT库。网上很多资源断开后不能自动重连，该资源支持断开后自动重连（亲测）。reconnect : true，即可。需要demo的同行留言。
MQTT协议中文文档和JS连接DEMO.zip
01-27
JavaScript连接MQTT的DEMO通常会展示如何使用JavaScript库（如Paho MQTT或Mosca）与MQTT Broker建立连接，发布和订阅消息。示例代码可能包括以下步骤： 1. **导入库**：引入MQTT库，例如`var mqtt = require('paho-...
使用JavaScript和MQTT开发物联网应用示例解析
10-14
接着，使用MQTT.js创建一个客户端，连接到mosca服务器，订阅温度传感器发布的主题。当收到新消息时，服务器端根据温度数据计算穿衣建议，并发布到一个新主题。同时，App客户端订阅这个主题，实时获取穿衣提示。 ...
mqtt31js文件
03-23
js从物接入lot hub获取数据
mqtt消息，通过js 接受和发送消息
01-21
通过js 实现mqtt消息实现，本资源只有js部分，服务端是java写的，可参考网上的也可以去下载我的另一个资源。
xmqtt.js支付宝小程序连接mqtt
09-06
xmqtt.js 支付宝小程序连接mqtt所需的js，同时优化了IOS无法接收消息的bug（AMQJS0007E Socket）
微信小程序连接mqtt.rar
01-06
首先，要实现微信小程序连接MQTT，你需要准备以下组件： 1. **服务器端MQTT Broker**：如Apache ActiveMQ、EMQ X Broker或HiveMQ等，它们负责接收和分发消息。 2. **微信小程序开发工具**：官方提供的IDE，用于编写...
java MQTT server ,MQTT client 直接使用java实现，快速连接物联网
09-11
支持 websocket mqtt 子协议（支持 mqtt.js）。 支持 http rest api，http api 文档详见。 支持 MQTT client 客户端。 支持 MQTT server 服务端。 支持 MQTT 遗嘱消息。 支持 MQTT 保留消息。 支持自定义消息...
【MQTT】Javascript通过WebSocket连接MQTT
天天向上 Up Up Up (*^▽^*)
11-09 2372
通过WebSocket服务，将MQTT服务收到的消息转发给网页，这样网页就也能使用MQTT协议了。SSL证书可以自己去制作，另外自制证书本来就是不安全的，需要自己想办法在网页中添加信任。这步比较麻烦，如果需要使用SSL，自己单独去研究下，这里主要讲解网页怎么使用mqtt。一个变通的方法是，在同一个程序中，同时集成MQTT服务和一个WebSocket服务。标准的MQTT是通过TCP协议来进行通信的，这样网页就没法使用MQTT协议了。当然，也可以不用MQTT协议，全部通过WebSocket来通信也可以。
深入理解javascript的实时通讯mqtt详解、封装、使用案例
05-09 724
MQTT（Message Queuing Telemetry Transport）是一种轻量级的发布/订阅消息传输协议，被设计用于连接带宽有限的设备，如物联网（IoT）设备。它支持低带宽、高延迟或不可靠的网络环境，并且易于实现。
解决 mqtt 诡异重复连接问题
热门推荐
不懂一休
08-12 2万+
以下问题为 阿里云 mqtt 使用过程中发现 一、首先贴出简单核心代码如下 client.on('connect', function () { client.publish('test/clientE', '' + (Math.random() * 10).toFixed(2), {'qos': 2, 'retain': true}, function (err) { if (err) { console.log(err) } else {
使用javascript连接mqtt协议（自动重连问题）
05-28
连接 MQTT 协议可以使用 Paho JavaScript 客户端库。在连接时，可以使用 Paho 客户端提供的自动重连功能，以便在连接丢失或断开时重新连接。 下面是使用 Paho JavaScript 客户端库连接 MQTT 协议并启用自动重连的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值