最近写了一个PC端收费的项目,利用mqtt去订阅用户是否支付成功并弹出相应的界面,这里记录一下中途遇到的问题和解决方案
首先是安装依赖,我发现直接用 npm install mqtt 经常会报错,我们这里可以考虑使用paho-mqtt或者别的版本的mqtt
我这里使用的是mqtt的2.18.8版本
npm install mqtt@2.18.8
下载完依赖就是引入问题了,vue2版本中,我们直接在需要的页面写上import mqtt from 'mqtt'会给我报错:Uncaught ReferenceError: Buffer is not definedh
后来也是找了很多资料发现,需要这样引入
import * as mqtt from 'mqtt/dist/mqtt.min';
下面就是写了,我这里有一个简单的订阅的例子
<template>
<div>
<button @click="unsubscribeTopics">关闭链接</button>
<button @click="startThis">开始订阅</button>
<button @click="publishMessage">发布消息</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
import * as mqtt from 'mqtt/dist/mqtt.min';
const client = ref(null)
const currentTopics = ref([])
const unsubscribeTopics = () => {
if (client.value && client.value.connected) {
client.value.unsubscribe(currentTopics.value, (err) => {
if (!err) {
console.log('成功取消订阅主题:', currentTopics.value);
currentTopics.value = []; // 清空当前主题列表
client.value.end()//彻底断掉连接
} else {
console.error('取消订阅失败:', err);
}
});
} else {
console.log('未连接到 MQTT 服务器或连接已断开');
}
}
const startThis = () => {
// 连接到 MQTT 服务器
client.value = mqtt.connect('你的地址', {
username: '你的账号',
password: '你的密码',
reconnectPeriod: false,//断掉之后是否重连
connectTimeout: 5000
});
// 监听连接事件
client.value.on('connect', () => {
console.log('监听成功');
// 订阅主题
client.value.subscribe('你订阅的主题');
currentTopics.value.push('你订阅的主题');
});
// 监听消息事件
client.value.on('message', (topic, message) => {
console.log(`监听数据 ${topic}: ${message.toString()}`);
// 在这里处理接收到的消息
});
// 监听连接失败事件
client.value.on('error', (error) => {
console.log('失败了:', error);
});
// 重连
client.value.on('reconnect', (error) => {
console.log('正在重连:', error)
})
}
// 发布
const publishMessage = () => {
if (client.value && client.value.connected) {
const messageToSend = 'Hello, MQTT!'; // 要发送的消息内容
const topicToSend = 'your/topic'; // 替换为你想要发布消息的主题
client.value.publish(topicToSend, messageToSend, { qos: 2 }, (err) => {
if (!err) {
console.log(`成功发布消息到主题 ${topicToSend}`);
} else {
console.error('发布消息出错:', err);
}
});
} else {
console.log('未连接到 MQTT 服务器或连接已断开');
}
}
</script>
<style scoped></style>
至于这里为什么要用message.toString(),那是因为直接返回过来的是一个二进制数组,我们需要转化一下,当然,如果你需要的就是二进制数组就不需要转换了
上面就是一个简单的发布订阅和断开链接的demo,这里写的非常详细,因为我是做的支付,所以我这里默认的qos就是2了,这里的qos根据你不同的需要去更改,具体如下
qos就是最大服务质量,其中:
0:“至多一次”,消息发布完全依赖底层TCP/IP网络。会发生消息丢失或重复。这一级别可用于如下情况,环境传感器数据,丢失一次读记录无所谓,因为不久后还会有第二次发送。这一种方式主要普通APP的推送,倘若你的智能设备在消息推送时未联网,推送过去没收到,再次联网也就收不到了。在这种情况下,消息会尽快发送,在带宽较小或者重要性较低的时候使用
1:“至少一次”,确保消息到达,如果接受端未收到消息,发布者会尝试重新发送消息,但消息重复可能会发生
2:“只有一次”,确保消息到达一次。在一些要求比较严格的计费系统中,可以使用此级别。在计费系统中,消息重复或丢失会导致不正确的结果。这种最高质量的消息发布服务还可以用于即时通讯类的APP的推送,确保用户收到且只会收到一次。
当然,这只是我个人的一些收集和理解,在后续项目上线过程中,我会在这篇文章中持续更新遇到的坑和需要注意的东西,如果对文章中的内容有 不同意见 或者 发现我文章中错误的地方,可以评论或者私信我