uniapp(app和小程序)中使用

1.下载mqtt.min.js或者mqtt.js文件

2.在utils目录下新建一个useMqtt.js文件、

const mqttConfig = {
	  mqttIP: '192.168.0.888',
	  mqttSn: 'OG583LL074585523002608',
	  devSn: '2'
}
let mqtt = require('./mqtt.min.js')
function useMqtt(options) {
let client
  const connection = {
    protocol: options.protocol || 'ws',
    host: options.host,
    // ws -> 8083; wss -> 8084
    port: options.port || 8083,
    clientId: 'emqx' + new Date().getTime(),
    // username: options.username,
    // password: options.password,
    clean: options.clean || true,
    connectTimeout: options.connectTimeout || 40000, // ms
    reconnectPeriod: options.reconnectPeriod || 4000 // ms
  }
  try {
    const { protocol, host, port, ...options } = connection
    let connectUrl = `${protocol}://${host}:${port}/mqtt`
	// #ifdef H5
	connectUrl = `ws://${host}:${port}/mqtt`
	 // #endif
	 // #ifdef MP-WEIXIN||APP-PLUS
	 connectUrl = `wx://${host}:${port}/mqtt`
	 // #endif
    client = mqtt.connect(connectUrl, options)
    client.on('connect', () => {
      console.log('connection successful')
      doSubscribe()
    })
    client.on('reconnect', () => {
      handleOnReConnect()
    })
    client.on('error', (error) => {
      console.log('connection error:', error)
    })
    // client.on('message', (topic: string, message: any) => {
    //   console.log('收到的数据--------------', JSON.parse(message))
    // })
  } catch (error) {
    console.log('mqtt.connect error:', error)
  }
  // //订阅信息设置
  const subscription = {
    topic: options.topic, //需要动态配置
    qos: options.qos || 2
  }

  let retryTimes = 0

  const handleOnReConnect = () => {
    retryTimes += 1
    if (retryTimes > 5) {
      try {
        client.end()
        retryTimes = 0
        console.log('connection maxReconnectTimes limit, stop retry')
      } catch (error) {
        console.log('handleOnReConnect catch error:', error)
      }
    }
  }
  //订阅消息
  const doSubscribe = () => {
    const { topic, qos } = subscription
    client.subscribe(topic, { qos }, (error, granted) => {
      if (error) {
        console.log('subscribe error:', error)
        return
      }
      console.log('subscribe successfully:', granted)
    })
  }
  //关闭连接
  client.destroyConnection = () => {
    if (client.connected) {
      try {
        client.end(false, () => {
          retryTimes = 0
          console.log('disconnected successfully')
        })
      } catch (error) {
        console.log('disconnect error:', error)
      }
    }
  }
  // //组件销毁前断开连接
  // onUnmounted(() => {
  //   console.log('页面销毁前断开连接------')
  //   destroyConnection()
  // })
  return client
}

export default useMqtt

使用

import useMqtt from '@/utils/useMqtt.js'
// 接收消息
		this.client = useMqtt({ host: mqttConfig.mqttIP, topic: `/sys/${mqttConfig.mqttSn}/up` })
		this.client.on('message', (topic, message) => {
			  const json = JSON.parse(message)
			  const data = json.devList && json.devList.length ? json.devList[0].varList : {}
			  const devSn = json.devList && json.devList.length ? json.devList[0].devSn : ''
			  if (devSn === '2') {
			    console.log(data) // 接收到的消息
			  }
			}) 
 // 发送消息                       
           this.client.publish(`/${mqttConfig.mqttSn}/down`, JSON.stringify(message), { qos: 0, retain: false }, error => {
                        if (!error) {
                          ElMessage.success('命令发送成功！')
                        } else {
                          ElMessage.error('命令发送失败！')
                        }
                 })
}

web端中使用

npm install mqtt

新建usemqtt.js文件

import * as mqtt from 'mqtt/dist/mqtt.min.js'

function useMqtt(options: any) {
  let client = ref({
    connected: false
  } as mqtt.MqttClient)
  console.log(options)
  const connection = reactive({
    protocol: options.protocol || 'ws',
    host: options.host,
    // ws -> 8083; wss -> 8084
    port: options.port || 8083,
    clientId: 'emqx' + new Date().getTime(),
    // username: options.username,
    // password: options.password,
    clean: options.clean || true,
    connectTimeout: options.connectTimeout || 40000, // ms
    reconnectPeriod: options.reconnectPeriod || 4000 // ms
  })
  try {
    const { protocol, host, port, ...options } = connection
    console.log(options)
    const connectUrl = `${protocol}://${host}:${port}/mqtt`
    client.value = mqtt.connect(connectUrl, options)
    client.value.on('connect', () => {
      console.log('connection successful')
      doSubscribe()
    })
    client.value.on('reconnect', () => {
      handleOnReConnect()
    })
    client.value.on('error', (error: any) => {
      console.log('connection error:', error)
    })
    // client.value.on('message', (topic: string, message: any) => {
    //   console.log('收到的数据--------------', JSON.parse(message))
    // })
  } catch (error) {
    console.log('mqtt.connect error:', error)
  }
  // //订阅信息设置
  const subscription = ref({
    topic: options.topic, //需要动态配置
    qos: (options.qos as mqtt.QoS) || 2
  })

  const retryTimes = ref(0)

  const handleOnReConnect = () => {
    retryTimes.value += 1
    if (retryTimes.value > 5) {
      try {
        client.value.end()
        retryTimes.value = 0
        console.log('connection maxReconnectTimes limit, stop retry')
      } catch (error) {
        console.log('handleOnReConnect catch error:', error)
      }
    }
  }
  //订阅消息
  const doSubscribe = () => {
    const { topic, qos } = subscription.value
    client.value.subscribe(topic, { qos }, (error: Error, granted: mqtt.ISubscriptionGrant[]) => {
      if (error) {
        console.log('subscribe error:', error)
        return
      }
      console.log('subscribe successfully:', granted)
    })
  }
  //关闭连接
  const destroyConnection = () => {
    if (client.value.connected) {
      try {
        client.value.end(false, () => {
          retryTimes.value = 0
          console.log('disconnected successfully')
        })
      } catch (error) {
        console.log('disconnect error:', error)
      }
    }
  }
  // //组件销毁前断开连接
  onUnmounted(() => {
    console.log('页面销毁前断开连接------')
    destroyConnection()
  })
  return client.value
}

export default useMqtt

使用

import useMqtt from '@/utils/useMqtt.js'

<script>
import useMqtt from '@/utils/useMqtt.js'
import { base_URL, mqttConfig } from '@/common/globalParams.js'
import { findInfoByCode } from '@/apis/api/findInfoByCode.js'
import { prefixTypeObj } from '@/common/globalParams.js'
import { findNameByCode, findNameById } from '@/apis/api/taskSeven.js'
export default {
  data() {
    return {
        client: null
    }
  },
  onLoad() {
    this.initMqtt()
  },
  beforeUnmount() {
    this.client.destroyConnection()
  },
  methods: {
    initMqtt() {
      this.client = useMqtt({ host: mqttConfig.mqttIp, topic: `/sys/${mqttConfig.mqttSn}/up` })
      // 接受消息
      this.client.on('message', (topic, message) => {
        const json = JSON.parse(message)
        const data = json.devList && json.devList.length ? json.devList[0].varList : {}
        const devSn = json.devList && json.devList.length ? json.devList[0].devSn : ''
        if (devSn === window.appsettings.edgeSn) {
          // console.log(data)
        }
      }) 
     // 发送消息
   sendMsg2Mqtt(key, val) {
      const message = {
       cmdId: 87,
       devSn: window.appsettings.edgeSn,
       varList: {
         [key]: val
       },
       req: '81100000111111'
     }
     console.log('message', message)
     client.publish(`/${window.appsettings.mqttSn}/down`, 
         JSON.stringify(message), { qos: 0, retain: false }, error => {      
            if (!error) {
              ElMessage.success('命令发送成功！')
            } else {
              ElMessage.error('命令发送失败！')
            }
          })
        }
    }
  }
}
</script>