vue 对接mqtt如何实现实时数据

这里给大家讲一下，前端vue实现mqtt连接，和数据订阅获取试试数据的功能。

第一步前端引入

import mqtt from 'mqtt';

配置连接

options : {
      connectTimeout: 40000,
      clientId: 'mqtitId-Home',
      username: "admin",
      password: "admin",
      clean: true
 },

实时数据的监听获取

mqttMSG () {
    let _this=this;
    client = mqtt.connect('ws://xxxxxx:8083/mqtt', this.options)
    this.client=client;
    // mqtt连接
    client.on('connect', (e) => {
        // console.log('连接成功:')
        client.subscribe('SBOX/test/'+_this.mac+'/'+_this.deviceId+'/device/data/push', { qos: 1 }, (error) => {
            if (!error) {
                // console.log('订阅成功')
            } else {
                // console.log('订阅失败')
            }
        })
    })
    // 接收消息处理
    client.on('message', (topic, message) => {
        // console.log('收到的消息', message.toString())
        this.msg = message.toString()
        var obj = JSON.parse(this.msg);
        for(var item in obj.Params){
            // console.log(item+"=="+obj.Params[item])
            _this.tableData.forEach(function(v,i){
                  if(v.devflg==item)
                  {
                       v.davalue=obj.Params[item]+"";
                       v.updatetime=obj.time.substring(0,19).replace("T"," ");
                  }
            })
        }
        })
    // 断开发起重连
    client.on('reconnect', (error) => {
        // console.log('正在重连:', error)
    })
    // 链接异常处理
    client.on('error', (error) => {
        // console.log('连接失败:', error)
    })
},

vue实现mqtt的对接，就这么简单，希望这里可以帮助到大家！更多了解的大家可以关注公众号：【泉城IT圈子】了解更多物联网知识和前端、java开发技术了。