【MQTT】VUE集成MQTT

写在前面的话：

        计划梳理MQTT集成至Java、Vue的系列文档，详见收录专栏。

        该示例文章，已将相关方法封装至工具类。

--再长的路，一步步也能走完

---

目录

一、前情提要

二、安装依赖

三、代码集成

1、JS工具类准备

2、VUE页面集成

2.1 引用MQTT 及 工具

2.2 编写mqtt配置变量

2.3 建立连接及订阅

2.4 发布相关代码

2.5 VUE完整代码

四、基于MQTTX，联调测试

1、测试VUE项目sub

2、测试VUE项目pub

---

一、前情提要

【MQTT】Linux(CentOS 7.5)：通过docker安装MQTT_Francis X的博客-CSDN博客

【MQTT】Windows：安装MQTT_Francis X的博客-CSDN博客

【MQTT】SpringBoot集成MQTT_Francis X的博客-CSDN博客

二、安装依赖

npm install mqtt@2.18.9 --save

三、代码集成

1、JS工具类准备

/*******************************************************************************
 * mqtt工具类
 *
 * 说明：该工具类，当前已集成如下方法：
 *    1、通用pub
 *    2、通用sub
 *
 * 若要查阅相关工具类，建议先折叠方法内部代码
 *
 * @author Francis
 * @since 2022-10-09 17:14
 * @version v1.0
 *******************************************************************************/
/**
 * 【通用】发布话题
 *
 * @param client
 * @param topic
 * @param qos
 * @param msg
 */
function pub(client, topic, qos, msg) {
  client.publish(topic, msg, qos, err => {
    if (!err) {
      console.log("发布成功！");
    } else {
      console.log("发布失败！", err);
    }
  })
}


/**
 * 【通用】订阅话题
 *
 * @param client
 * @param topic
 * @param qos
 */
function sub(client, topic, qos) {
  client.subscribe(topic, qos, err => {
    if (!err) {
      console.log("订阅成功！");
    } else {
      console.log("订阅失败！", err);
    }
  })
}


export {
  pub,
  sub,
}

2、VUE页面集成

2.1 引用MQTT 及 工具

import mqtt from "mqtt";
import * as mqttUtils from "@/utils/mqttUtils";

2.2 编写mqtt配置变量

    data() {
      return {
        config: {
          username: "admin",
          password: "public",
          clientId: "code_dev_ui" + new Date().getTime(),
          keepAlive: 60,
          cleanSession: true,
          clear: true
        },
        mqttServer: "ws://192.168.3.30:8083/mqtt",
        client: "",
      }
    },

2.3 建立连接及订阅

      /**
       * 建立连接
       */
      handleConnection() {
        this.client = mqtt.connect(this.mqttServer, this.config);

        // mqtt连接
        this.client.on("connect", (e) => {
          console.log(e, "mqtt连接成功！");
		  let topic1 = "test1";
		  let topic2 = "test2";
		  
		  let qos1 = 0;
		  let qos2 = 0;

          this.mqttUtils.sub(this.client, [topic1, topic2], [qos1, qos2]);
        });

        // 消息处理
        this.client.on("message", (topic, message) => {
		  console.log("收到消息", topic, message);
        })

        // 断线重连
        this.client.on("reconnect", (error) => {
          console.log("正在重连：", new Date().getTime(), error);
        })
        
		// 连接失败
        this.client.on("error", (err) => {
          console.log("mqtt连接失败！{}", err);
          this.client.end();
        })
      },

2.4 发布相关代码

<el-button @click="testPub">发布消息</el-button>

      /**
       * 测试消息发布
       */
      testPub() {
        let topic = "vue_pub_test";
        let qos = 1;
        let msg = {
          content: "测试vue消息发送"
        }
        this.mqttUtils.pub(this.client, topic, qos, JSON.stringify(msg));
      }

2.5 VUE完整代码

<template>
  <el-container>
    <el-button @click="testPub">发布消息</el-button>
  </el-container>
</template>

<script>
  import mqtt from "mqtt";
  import * as mqttUtils from "@/utils/mqttUtils";

  export default {
    name: "MqttTest",
    data() {
      return {
        config: {
          username: "admin",
          password: "public",
          clientId: "code_dev_ui" + new Date().getTime(),
          keepAlive: 60,
          cleanSession: true,
          clear: true
        },
        mqttServer: "ws://192.168.3.30:8083/mqtt",
        client: "",
      }
    },
    methods: {

      /**
       * 建立连接
       */
      handleConnection() {
        this.client = mqtt.connect(this.mqttServer, this.config);

        // mqtt连接
        this.client.on("connect", (e) => {
          console.log(e, "mqtt连接成功！");
		  let topic1 = "test1";
		  let topic2 = "test2";
		  
		  let qos1 = 0;
		  let qos2 = 0;

          this.mqttUtils.sub(this.client, [topic1, topic2], [qos1, qos2]);
        });

        // 消息处理
        this.client.on("message", (topic, message) => {
		  console.log("收到消息", topic, message);
        })

        // 断线重连
        this.client.on("reconnect", (error) => {
          console.log("正在重连：", new Date().getTime(), error);
        })
        
		// 连接失败
        this.client.on("error", (err) => {
          console.log("mqtt连接失败！{}", err);
          this.client.end();
        })
      },

      /**
       * 测试消息发布
       */
      testPub() {
        let topic = "vue_pub_test";
        let qos = 1;
        let msg = {
          content: "测试vue消息发送"
        }
        this.mqttUtils.pub(this.client, topic, qos, JSON.stringify(msg));
      }
    },
    mounted() {
      this.handleConnection();
    }
  }
</script>

四、基于MQTTX，联调测试

1、测试VUE项目sub

 

2、测试VUE项目pub