在vue中如何使用mqtt服务端实现即时通讯

在大部分项目中，前后端交互只是前端请求后端的接口，拿到数据后再处理，前段时间我手上的一个项目需要用到mqtt，使用后觉得真神奇，只需要订阅就能实时获取到数据，废话不多说，妹妹给你们上步骤！

1.在vue项目中安装mqtt.js

npm install mqtt --save
复制代码

2.在项目的main.js或者在需要用到的vue页面上引用

import mqtt from 'mqtt'
复制代码

3.在vue页面的data中定义一个client对象，方便后面使用

client: {}
复制代码

ok，接下来就是重点了，首先我们得连接mqtt，连接mqtt的方法有个回调函数，我接下来就把订阅的方法写在连接成功后的回调里，这样能保证不出错，上代码！

4.连接mqtt并订阅

  //连接服务器
    connect() {
      let options = {
        username: "xxx",
        password: "xxxx",
        cleanSession : false,
        keepAlive:60,
        clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
        connectTimeout: 4000
      }
      this.client = mqtt.connect('ws://192.168.xxx.xx:8083/mqtt',options);
      this.client.on("connect", (e)=>{
        console.log("成功连接服务器:",e);
        //订阅三个名叫'top/#', 'three/#'和'#'的主题
        this.client.subscribe(['top/#', 'three/#', '#'], { qos: 1 }, (err)=> {
          if (!err) {
            console.log("订阅成功");
            //向主题叫“pubtop”发布一则内容为'hello,this is a nice day!'的消息
            this.publish("pubtop", 'hello,this is a nice day!')
          } else {
            console.log('消息订阅失败！')
          }
        });
      });
      //重新连接
      this.reconnect()
      //是否已经断开连接
      this.mqttError()
      //监听获取信息
      this.getMessage()
    }
复制代码

5.发布消息方法

    //发布消息@topic主题  @message发布内容
    publish(topic,message) {
      if (!this.client.connected) {
        console.log('客户端未连接')
        return
      }
      this.client.publish(topic,message,{qos: 1},(err) => {
        if(!err) {
          console.log('主题为'+topic+ "发布成功")
        }
      })
    }
复制代码

6.监听并接收上面订阅的三个主题的信息

    //监听接收消息
    getMessage() {
      this.client.on("message", (topic, message) => {
        if(message) {
          console.log('收到来着',topic,'的信息',message.toString())
          const res = JSON.parse(message.toString())
          //console.log(res, 'res')
          switch(topic) {
             case 'top/#' :
               this.msg = res
               break;
             case 'three/#' :
               this.msg = res
               break;
             case 'three/#' :
               this.msg = res
               break;
             default:
               return
               this.msg = res
           }
           this.msg = message
        }
      });
    },
复制代码

7.监听服务器是否连接失败

    //监听服务器是否连接失败
    mqttError() {
      this.client.on('error',(error) => {
        console.log('连接失败：',error)
        this.client.end()
      })
    },
复制代码

8.取消订阅

    //取消订阅
    unsubscribe() {
      this.client.unsubscribe(this.mtopic, (error)=> {
        console.log('主题为'+ this.mtopic+'取消订阅成功',error)
      })
    },
复制代码

9.断开连接

    //断开连接
    unconnect() {
      this.client.end()
      this.client = null
      console.log('服务器已断开连接！')
    },
复制代码

10.监听服务器重新连接

    //监听服务器重新连接
    reconnect() {
      this.client.on('reconnect', (error) => {
          console.log('正在重连:', error)
      });
    },
复制代码

好了，到这里差不多就结束了，什么？你还有哪里不懂？评论区告诉妹妹，妹妹帮你想想办法！码字不易，点个赞再走家人们！