简介
MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的"轻量级"通讯协议,是 TCP/IP 的再封装,由 IBM 在 1999 年发布。MQTT 最大优点在于,地开销,少流量实现网络通信
协议
mqtt 协议中分为客户端和服务端。服务端一般由消息 broker 实现,MQTT 与传统 HTTP 协议有所不同,所有接入的设备都为客户端。
客户端有两种身份发布者(Publish)、订阅者(Subscribe),也可以同时具备两者身份。
顾名思义,发布者可以发布消息,订阅者可以接受消息
消息内容
MQTT 传输的消息分为:主题(Topic)和负载(payload)两部分:
(1)Topic,主题,订阅者订阅指定主题后,会收到其他发布者发送到该主题的数据;
(2)payload,具体的载荷
Vue3 中使用以及订阅
没有安装可使用 npm install mqtt --save
引用mqtt库 不要直接引用mqtt 会报错
import mqtt from 'mqtt/dist/mqtt'
// 连接选项
controlOptions: {
clean: true, // true: 清除会话, false: 保留会话
connectTimeout: 5000, // 超时时间
// 认证信息 最好使用不同的
clientId: `mqtt_${Math.random().toString(16).slice(3)}`,
username: '账号',
password: '密码'
}
// 初始化
createSocketConnect() {
this.controlWsUrl = `${import.meta.env.VITE_APP_BASE_WS_URL}/mqtt`
// 创建实例 传入地址和参数对象
const client = mqtt.connect(this.controlWsUrl, this.options)
// 保存实例
this.clientInstance = client
client.on('reconnect', (error) => {
console.log('正在重连:', error)
})
client.on('connect', (con) => {
console.log('连接成功', con)
// 订阅主题
this.doSubscribe(this.notificationSubscription)
})
client.on('error', (error) => {
console.log('连接失败:', error)
})
client.on('message', (topic, message) => {
console.log('收到消息:', topic, message)
// 处理消息方法
this.handleTopicMsgBox(topic, message)
})
},
// 订阅主题
doSubscribe(subscribe) {
const { topic, qos } = subscribe
this.clientInstance.subscribe(topic, { qos }, (error, res) => {
if (error) {
console.log('订阅主题错误', error)
return
}
this.subscribeSuccess = true
console.log('订阅主题', res)
})
},
// 取消订阅
doUnSubscribe(subscribe) {
const { topic } = subscribe
this.clientInstance?.unsubscribe(topic, (error) => {
if (error) {
console.log('退订错误', error)
}
})
},
// 发送消息
doPublish() {
const topic = '主题名',
qos = 0,
payload = '{ "msg": "Hello, 我是发布的消息." }'
this.clientInstance?.publish(topic, payload, qos, (error) => {
if (error) {
console.log('发布错误', error)
}
})
},
// 断开连接
destroyConnection() {
if (this.clientInstance) {
try {
this.clientInstance.end()
this.clientInstance = null
console.log('成功断开连接!')
} catch (error) {
console.log('断开连接失败', error.toString())
}
}
}
上面是一些基础使用的方法,我是在pinia中单独创建的文件,可以作为参考 具体的也可以查看官网 MQTT JavaScript 客户端库 | EMQX 4.4 文档
作者:刘云辉