js连接mqtt进行通信（超详细）

最新推荐文章于 2024-05-09 14:33:02 发布

IT空门:门主

最新推荐文章于 2024-05-09 14:33:02 发布

阅读量2.4k

点赞数 3

分类专栏： http html 文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/m0_55699184/article/details/130618802

版权

http 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

MQTT.JS

MQTT.js是MQTT协议的客户端JS库,是用JavaScript为node.js和浏览器编写的。

GitHub项目地址:GitHub - mqttjs/MQTT.js: The MQTT client for Node.js and the browser

3.2.1 API列表

3.2.2 代码实例：

官方的实例代码:MQTT JavaScript 客户端库 | EMQX 4.4 文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MQTT-测试</title>
</head>
   <style>
       div{
           width: 300px;
           height: 300px;
           border: 1px solid red;
       }
   </style>
  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"> </script>
 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    //初始化
    $(function() {
        //页面加载完成后
        //连接选项
        const options = {
            clean: true, // true: 清除会话, false: 保留会话
            connectTimeout: 4000, // 超时时间
            // 认证信息
            clientId: 'test',	//客户端ID
            username: 'admin', //连接用户名
            password: 'admin',//连接密码，默认为public,新版本登录后台界面会让你修改密码
            // 心跳时间
            keepalive: 60,
        }
        // 连接字符串, 通过协议指定使用的连接方式
        const connectUrl = 'ws://127.0.0.1:8083/mqtt' //连接服务端地址，注意查看ws协议对应的端口号
        //连接MQTT客户端
        const client = mqtt.connect(connectUrl, options)
        /**
         *  mqtt.client相关事件
         * */
        //重新连接，启动触发回调
        client.on('reconnect', () => {
            console.log("客户端正在重连.....请稍后")
            $('#div1').text("客户端正在重连.....请稍后")
        });
        //连接断开，启动触发回调
        client.on('close', function () {
            console.log('客户端以断开连接..... ')
            $('#div1').text("客户端以断开连接..... ")
        });
        //从brober连接到断开连接的数据包后发出 【MQTT5.0特性】
        client.on("disconnect", function (packet) {
            console.log('从brober获取到了断开连接的数据包..... ' + packet)
            $('#div1').text("从brober获取到了断开连接的数据包..... " + packet)
        });
        //客户端脱机下线,启动触发回调
        client.on("offline", function () {
            console.log('客户端脱机下线..... ')
            $('#div1').text("客户端脱机下线..... ")
        });
        //客户端无法连接或出现错误时触发回调
        client.on("error", (error) => {
            console.log('客户端无法连接或出现错误..... ' + error)
            $('#div1').text("客户端无法连接或出现错误..... " + error)
        });
        /**
         * 以下两个事件监听
         * */
        //当客户端发送任何请求数据包时,(这包括published()包，以及MQTT用于管理的订阅和连接的包21)
        client.on('packetsend', (packet) => {
            console.log('客户端已发出数据包..... ' + packet)
            $('#div2').text("客户端已发出数据包..... " + packet)
        });
        //当客户端收到任何请求数据包时,(这包括来自订阅主题的信息包以及MQTT用于管理订阅和连接的信息包)
        client.on('packetreceive', (packet) => {
            console.log('客户端已发出数据包..... ' + packet)
            console.log(packet)
            $('#div22').text("客户端收到出数据包..... " + packet)

        });
        //连接客户端
        /**
         * 发布订阅消息
         * */
        client.on('connect', function (c) {
            console.log("连接客户端成功")
            $('#div1').text("连接客户端成功..... " + new Date())
            //订阅
            client.subscribe("testtopic/#", {qos: 2})
            //每隔两秒发布一次
            setTimeout(publish, 2000)
        });
        //发布消息
        function publish(){
            const message='曾文斌好帅啊'+Math.random()+new Date();
            client.publish("testtopic/1234",message,{qos : 2})
            console.log("发布消息成功....."+message)
            $('#div3').text("发布消息成功....."+message)
        }
        // 拿到客户端订阅的消息
        /**
         * topic：收到的数据包
         * message:收到的数据包的负载playload
         * packet:收到的数据包
         * */
        client.on('message',(topic,message,packet)=>{
            $('#div4').text("客户端消息.....topic="+topic+"message="+message+"packet="+packet)
        });
        //退出MQTT的连接
        $(window).bind("beforeunload",()=>{
          $('#div1').text("客户端窗口关闭,断开连接");
        });

    })

</script>

<body>
<div id="div1">div1</div><hr>
<div id="div2">div2</div><hr>
<div id="div22">div22</div><hr>
<div id="div3">div3</div>
<div id="div4">div4</div>
</body>
</html>

想要查看或者修改不同协议对应的端口号需要到配置文件(~安装目录/etc/emqx.conf)中查看，部分协议如下：

//tcp协议 （连接地址为 tcp://127.0.0.1:1883）
listeners.tcp.default {
bind = “0.0.0.0:1883”
max_connections = 1024000
}

//ssl（连接地址为 ssl://127.0.0.1:8883）
listeners.ssl.default {
bind = “0.0.0.0:8883”
max_connections = 512000
ssl_options {
keyfile = “etc/certs/key.pem”
certfile = “etc/certs/cert.pem”
cacertfile = “etc/certs/cacert.pem”
}
}

//ws协议 （连接地址为 ws://127.0.0.1:8083/mqtt）
listeners.ws.default {
bind = “0.0.0.0:8083”
max_connections = 1024000
websocket.mqtt_path = “/mqtt”
}

//wss协议 （连接地址为 wss://127.0.0.1:8084/mqtt）
listeners.wss.default {
bind = “0.0.0.0:8084”
max_connections = 512000
websocket.mqtt_path = “/mqtt”
ssl_options {
keyfile = “etc/certs/key.pem”
certfile = “etc/certs/cert.pem”
cacertfile = “etc/certs/cacert.pem”
}
}

监听端口的图片:

IT空门:门主

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
js连接mqtt进行通信（超详细）

MQTT.js是MQTT协议的客户端JS库,是用JavaScript为node.js和浏览器编写的。//wss协议（连接地址为 wss://127.0.0.1:8084/mqtt）//ws协议（连接地址为 ws://127.0.0.1:8083/mqtt）//tcp协议（连接地址为 tcp://127.0.0.1:1883）//ssl（连接地址为 ssl://127.0.0.1:8883）
复制链接

扫一扫