vue 项目中使用 mqtt

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 = nullMessage.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 = resbreakcase 'topic/class':this.class = resbreakdefault:return}}}}
}
</script>