vue使用mqtt（二十三）

vue使用mqtt

之前以为自己写了，但是后来发现没写，所有来补上，其实这些个通信在写法上都是差不多的，只是用不同而已，适应的场景不同。
解释：作为mqtt而言，还是订阅发布的形式吗，不多说了，开始补作业

1.先安装

npm install mqtt --save

2.使用位置

这个东西还是建议用到哪个地方就放在哪个地方
你可以放在一个公共的组件里面，或者进行约束好 放在App.vue

3.开始使用

引入库文件 定义相应的变量

    // 使用mqtt接收推送消息
    import mqtt from 'mqtt'

    const options = {
        connectTimeout: 4000,
        username: 'mqtt的登录名称',
        password: 'mqtt的密码',
        clean: true
    }

建议把mqtt的对象 挂载到公共的变量， 赋值成全局的变量，这样使用起来方便，
建立一个公共的文件 gloab.js ，存储获取连接成功的mqtt的对象

//gloab.js
 export default {
    // 接收消息的对象
    ws: {},
    setWs: function(newWs) {
        this.ws = newWs
    },
  }

	// 将mqtt的连接对象赋值成全局的
      this.global.setCompulsoryWs(mqtt.connect('ws://地址:8083/mqtt', options))
      this.global.CompulsoryWs.on('connect', () => {
          this.global.CompulsoryWs.subscribe('mqtt的订阅主题', {qos: 2}, (error) => {
              if (!error) {
                  console.log('（mqtt）监听中', '时间:', new Date().toLocaleString())
              } else {
                  console.log('（mqtt）订阅失败')
              }
          })

      })


      // 接收消息处理
      this.global.CompulsoryWs.on('message', (topic, message) => {
          console.log('收到来自', topic, '的消息', message.toString())
      })
      // 断开发起重连
      this.global.CompulsoryWs.on('reconnect', (error) => {
          console.log('（mqtt）正在重连:', error, '时间:', new Date().toLocaleString())
      })
      // 链接异常处理
      this.global.CompulsoryWs.on('error', (error) => {
          console.log('（mqtt）连接失败:', error)
      })

注意：

qos 的三种模式 ，根据自己的需求进行使用
再有就是 你要是进行了全局的赋值 在进行连接的时候 要把那个清理掉 要不然容易出问题

this.global.setCompulsoryWs({})

还有就是版本问题，使用的时候根据自己的要求查看情况，要是出现解决不了的问题，降低版本试试