使用js连接mqtt

最新推荐文章于 2024-05-09 14:33:02 发布
最新推荐文章于 2024-05-09 14:33:02 发布
阅读量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
    评论
专栏目录
HTML5网页APP连接MQTT,使用js连接mqtt
weixin_36132740的博客
06-30 1904
使用js连接mqtt使用js连接mqtt描述：使用javascript连接mqtt代码：ehz-app{{ message }}var app = new Vue({el: '#app',data: {message: 'connect to mqtt'}});var hostname = '10.10.14.235', //'192.168.1.2',port = 8083,clientId =...
js连接mqtt接口
Sun_blog
12-20 839
最近项目中用到了kafka接口，后来又改用了mqtt接口，今天就来记录一下js如何连接mqtt。主要是使用了mqtt.js这个库，使用 WebSocket 连接。
深入理解javascript的实时通讯mqtt详解、封装、使用案例
最新发布
05-09 764
MQTT（Message Queuing Telemetry Transport）是一种轻量级的发布/订阅消息传输协议，被设计用于连接带宽有限的设备，如物联网（IoT）设备。它支持低带宽、高延迟或不可靠的网络环境，并且易于实现。
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 …… 的问题，请看我另一篇文章，其中记录了我多次用到，遇见的连接问题。
node.js连接mqtt
dongfangxinding的博客
12-07 1083
我们使用刚才设置的连接参数来进行连接，连接的 URL 通过上面定义的 host、port 端口来进行拼接。然后调用 mqtt 模块内置的 connect 函数，连接成功后返回一个 Client 实例。本项目使用 Node.js v14.14.0 进行开发和测试，读者可用如下命令确认 Node.js 的版本。服务器连接、主题订阅、消息发布与接收的代码。本文将使用 EMQ X 提供的。，该服务基于 EMQ X 的。引入 MQTT.js 客户端库。
js连接mqtt进行通信
热门推荐
凉兮的博客
01-13 3万+
js连接mqtt进行通信（包含不同协议）
js连接mqtt
qq_30849965的博客
04-27 4575
js连接mqtt 项目中要用到mqtt，前端调用，使用github开源的paho-mqtt.js，api还是挺全面的，网上各种教程很全面，但是感觉代码过于杂乱，故而封装的一下。仿jquery ajax调用方法。 首先本项目依赖 paho-mqtt.js 1.引用paho-mqtt.js <script src="https://cdnjs.cloudflare.com/ajax/libs/p...
使用JavaScript实现MQTT客户端的创建
weixin_65042674的博客
08-07 746
MQTT作为一种轻量级的、开放的消息传输协议，被广泛应用于物联网领域。本文将为您介绍如何使用MQTT实现物联网设备之间的通信。MQTT基本概念MQTT是一种基于发布-订阅模型的通信协议。它使用一个消息代理（broker）来转发消息，并支持设备间的异步通信。MQTT具有低延迟、低带宽占用和易于实现的特点。MQTT协议规范和消息格式MQTT定义了协议中各个部分的格式和规范。它包括固定头部、消息类型、可变头部和有效负载等组成部分。
javascript 连接 mqtt
梵天一梦
08-12 2289
javascript 连接 mqtt 基于mqttws31.js 及MqttX.js var mqttOpts = { id: '123456789', host: 'd.iyanhong.com',//127.0.0.1 d.iyanhong.com port: 9000, userName: "test", passWord: "123456", reconnect: true, //自动...
JavaScript使用MQTT
baidu_34785556的博客
10-12 7832
提供mqtt在javascript上的应用实例。
websocket连接MQTT服务器所用的js文件——mqtt.js和mqtt.min.js
07-24
mqtt.js库，下载后可以用找我要源码和压缩文件（mqtt.min.js），有问题随时请教
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客户端订阅这个主题，实时获取穿衣提示。 ...
emqx客户端用户名密码登录验证配置
u011089760的博客
05-06 2万+
摘要：使用emqx docker开发或者生产情况下，需要配置客户端登录的账号密码，只有登录的client才能订阅和发布主题消息，以下为简要配置。 环境说明： 1.linux系统下，centos 7环境 2.使用docker运行emqtt服务器，参照：https://blog.csdn.net/u011089760/article/details/89892591 ...
EMQX docker安装及运行
u011089760的博客
05-06 2万+
1.镜像页面地址： https://hub.docker.com/r/emqx/emqx 2.拉取镜像命令： docker pull emqx/emqx 3.Docker的一些操作命令： docker images 运行docker 命令: docker run --rm -ti --name emqx -p 18083:18083 -p 1883:188...
emqx使用自制CA证书登录配置（双向认证）
u011089760的博客
05-08 6716
1)服务器环境 操作系统：centos 7 Emtqq版本：v3.1.0 Mysql版本：V5.6+ 2).生成自签名的CA key和证书(简单起见客户端和服务端共用一个CA证书) openssl genrsa -out ca.key 2048 openssl req -x509 -new -nodes -key ca.key -sha25...
使用javascript连接mqtt协议（自动重连问题）
05-28
连接 MQTT 协议可以使用 Paho JavaScript 客户端库。在连接时，可以使用 Paho 客户端提供的自动重连功能，以便在连接丢失或断开时重新连接。 下面是使用 Paho JavaScript 客户端库连接 MQTT 协议并启用自动重连的示例代码： ```javascript // 创建客户端实例 var client = new Paho.MQTT.Client("mqtt.example.com", 1883, "clientId"); // 设置连接参数 var options = { useSSL: false, cleanSession: true, onSuccess: onConnect, onFailure: onFailure, reconnect: true, // 启用自动重连 reconnectInterval: 5000 // 重连间隔（毫秒） }; // 连接到 MQTT 服务器 client.connect(options); // 连接成功回调函数 function onConnect() { console.log("Connected to MQTT server!"); // 订阅一个主题 client.subscribe("topic"); } // 连接失败回调函数 function onFailure() { console.log("Failed to connect to MQTT server!"); } ``` 在上面的示例代码中，`reconnect` 参数设置为 `true`，以启用自动重连功能。当连接丢失或断开时，Paho 客户端将自动尝试重新连接。`reconnectInterval` 参数设置重新连接的间隔时间（以毫秒为单位）。 注意，自动重连功能可能会导致连接请求不断重试，直到连接成功或达到最大重试次数。为了避免无限制的重试，可以通过设置 `maxReconnectAttempts` 参数来控制最大重试次数。例如： ```javascript var options = { reconnect: true, reconnectInterval: 5000, maxReconnectAttempts: 10 // 最大重试次数 }; ``` 以上就是使用 JavaScript 连接 MQTT 协议并启用自动重连的示例代码。希望能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值