VUE如何通过MQTT实时更新数据？

先看看实现的效果 通过MQTTX客户端发送信息页面可实时更新

通过MQTTX客户端发送信息EMQ后台实时记录更新状态

通过EMQ后台发送信息页面实时更新

Vue代码如下：

1.新建mqttserver.js文件

export const MQTTSDATA = {
   ip : 'ws://192.168.0.127:8083/mqtt',
   userName : 'admin',
   passWord : 'public',
   clienId : 'mqttjs_df72b4d32c',
   topic:'tt2'
}
export const mqttoptions = {
  connectTimeout:4000,
  clientId:MQTTSDATA.clienId,
  username:MQTTSDATA.userName,
  password:MQTTSDATA.passWord,
  clean:true
}

2.新建MQTT.vue文件

<template>
  <div>
    <div style="font-size: 32px;color: #EFF5FB;">订阅的主题:{{topic}}</div>
    <div style="font-size: 32px;color: #EFF5FB;">收到的消息:{{content}}</div>
  </div>
</template>
<script>
import mqtt from 'mqtt';
import {MQTTSDATA,mqttoptions} from "@/utils/mqttserver.js";

var client = mqtt.connect(MQTTSDATA.ip,mqttoptions);
export default {
  name: "MQTT",
  data() {
    return {
      content:'',//mqtt接受内容
      topic:'',// mqtt主题
    };
  },
    created() {
     this.myMqtt();
    },
    methods: {
      myMqtt(){
       // 连接MQTT
       client.on('connect',(e) => {
         console.log('连接成功');
         client.subscribe(["tt1","tt2"],error =>{
           if(!error){
             console.log("订阅成功")
             this.topic = MQTTSDATA.topic;
           }else{
             console.log("订阅失败")
           }
         });
      })
      //接受推送信息
      let topic = MQTTSDATA.topic;
      client.on('message',(topic,message)=>{
        console.log('接受推送的消息',message.toString());
        this.content = message.toString();
        console.log('message',message.toString());
      })
      // 断开重连
       client.on('reconnect',(error)=>{
         console.log('正在重连...',error);
       })
      // 链接异常处理
        client.on('error',(error)=>{
         console.log('链接失败...',error);
       })
     },
    }