vue3+vite 连mqtt （遇到的坑的简单的demo）

最近写了一个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的推送，确保用户收到且只会收到一次。

当然，这只是我个人的一些收集和理解，在后续项目上线过程中，我会在这篇文章中持续更新遇到的坑和需要注意的东西，如果对文章中的内容有 不同意见 或者 发现我文章中错误的地方，可以评论或者私信我