vue 项目中使用 mqtt

加油小吃货

已于 2023-11-28 11:03:49 修改

阅读量919

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2023-11-27 15:54:50 首次发布

本文链接：https://blog.csdn.net/Thea12138/article/details/134647448

文章介绍了如何在HTML中通过CDN引入MQTT库，并在Vue组件中封装MQTT连接函数，包括连接、订阅、发布、取消订阅和断开连接操作，以及在Vue页面中实际使用的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在html 中用cdn方式引入

 <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

2、封装代码 mqtt_connect.js

// import * as mqtt from 'mqtt/dist/mqtt.min'
// 不知道为什么 我用引入的方式不成，就在html 用的cdn方式接入了
import { Message } from 'element-ui'
let client = {}
// 连接服务器
/**
 * params:
 * @options 参数
 */
export function connectFn({ username, password, url, topic, clientId }, callBack) {
  const options = {
    username,
    password,
    cleanSession: false,
    keepAlive: 10,
    clientId: clientId,
    connectTimeout: 4000
  }
  client = mqtt.connect(url, options)
  client.on('connect', (e) => {
    Message.success('成功连接服务器')
    console.log('成功连接服务器:', e)
    // 订阅主题
    console.log(topic, 'topictopic')
    client.subscribe(topic, { qos: 1 }, (err) => {
      if (!err) {
        Message.success('订阅成功')
        console.log('订阅成功')
      } else {
        Message.error('消息订阅失败！')
        console.log('消息订阅失败！')
      }
    })
  })
  // 重新连接
  //   reconnect()
  // 是否已经断开连接
  mqttError()
  // 监听获取信息
  getMessage(callBack)
}
// 发布消息 @topic主题  @message发布内容
export function publish(topic, message) {
  if (!client.connected) {
    console.log('客户端未连接')
    return
  }
  client.publish(topic, message, { qos: 1 }, (err) => {
    if (!err) {
      console.log('主题为' + topic + '发布成功')
    }
  })
}
// 监听接收消息
function getMessage(callBack) {
  client.on('message', (topic, message) => {
    if (message) {
      callBack(topic, message)
    }
  })
}
// 监听服务器是否连接失败
function mqttError() {
  client.on('error', (error) => {
    console.log('连接失败：', error)
    client.end()
  })
}
// 取消订阅
export function unsubscribe(topicList) {
  client.unsubscribe(topicList, (error) => {
    console.log('主题为' + topicList + '取消订阅成功', error)
  })
}
// 断开连接
export function unconnect() {
  client.end()
  client = null
  Message.warning('服务器已断开连接！')
  console.log('服务器已断开连接！')
}
// 监听服务器重新连接
function reconnect() {
  client.on('reconnect', (error) => {
    console.log('正在重连:', error)
  })
}

3.vue页面中使用

<script>
import { connectFn, unsubscribe, unconnect } from '@/utils/mqtt_connect'

export default {
  data() {
    return {
      topicList: []
    }
  },
  mounted() {
    
    this.topicList.push(`xxxxx`)
    connectFn(
      {
        url: 'xxxxx',
        username: 'xxx',
        password: 'xxx',
        topic: `xxxx`,
        clientId: `xxxx`
      },
      this.getMessage
    )
  },
  beforeDestroy() {
    unsubscribe(this.topicList)
    unconnect()
  },

  methods: {
    getMessage(topic, message) {
      if (message) {
        console.log('收到来着', topic, '的信息', message.toString())
        const res = JSON.parse(message.toString())
        switch (topic) {
          case 'topic/username':
            this.username = res
            break
          case 'topic/class':
            this.class = res
            break
          default:
            return
        }
      }
    }
  }
}
</script>