脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3 MQTT获取数据

在Vue3项目中使用MQTT获取数据的方法示例

 更新时间：2025年11月06日 08:27:47   作者：蚘雨溪  
这篇文章主要介绍了在Vue3项目中使用MQTT.js库实现数据获取的步骤,包括安装库、创建MQTT连接、发送和接收消息、配置安全选项等,并提供了一个完整的示例代码和常见问题解决方法,需要的朋友可以参考下

在 Vue 3 项目中使用 MQTT 获取数据，需通过 MQTT.js 库实现与 MQTT 服务器的连接、订阅主题及消息处理。以下是分步指南：

一、初始化 Vue 3 项目

使用 Vue CLI 或 Vite 创建项目：

npm create vue@latest  # 使用 Vue CLI
# 或
npm create vite@latest my-vue3-mqtt -- --template vue

二、安装 MQTT.js 库

通过 npm 或 yarn 安装：

npm install mqtt
# 或
yarn add mqtt

三、集成 MQTT 到 Vue 3 组件

1. 创建 MQTT 连接

在组件中引入 mqtt 并建立连接：

javascript
1import { onMounted, onBeforeUnmount, ref } from 'vue';
2import mqtt from 'mqtt';
3
4export default {
5  setup() {
6    const client = ref(null);
7    const messages = ref([]);
8
9    const connectMqtt = () => {
10      const options = {
11        keepalive: 30,
12        clientId: `vue3_${Math.random().toString(16).slice(2)}`,
13        username: 'your_username', // 可选
14        password: 'your_password', // 可选
15        clean: true,
16      };
17
18      // 使用 WebSocket 协议（ws:// 或 wss://）
19      client.value = mqtt.connect('ws://your_mqtt_server:8083/mqtt', options);
20
21      client.value.on('connect', () => {
22        console.log('Connected to MQTT Broker');
23        // 订阅主题
24        client.value.subscribe('test/topic', { qos: 1 }, (err) => {
25          if (!err) console.log('Subscription successful');
26        });
27      });
28
29      client.value.on('message', (topic, message) => {
30        const data = JSON.parse(message.toString());
31        messages.value.push({ topic, data });
32        console.log(`Received: ${message.toString()} from ${topic}`);
33      });
34
35      client.value.on('error', (err) => {
36        console.error('MQTT Error:', err);
37      });
38
39      client.value.on('reconnect', () => {
40        console.log('Reconnecting...');
41      });
42
43      client.value.on('close', () => {
44        console.log('Disconnected from MQTT Broker');
45      });
46    };
47
48    onMounted(() => {
49      connectMqtt();
50    });
51
52    onBeforeUnmount(() => {
53      if (client.value) {
54        client.value.end();
55      }
56    });
57
58    return { messages };
59  }
60};

2. 发送消息（可选）

若需发布消息，可添加方法：

const publishMessage = (topic, payload) => {
2  if (client.value) {
3    client.value.publish(topic, JSON.stringify(payload), { qos: 1 }, (err) => {
4      if (err) console.error('Publish failed:', err);
5      else console.log('Message published');
6    });
7  }
8};

四、模板中显示消息

在组件模板中渲染接收到的消息：

<template>
2  <div>
3    <h2>MQTT Messages</h2>
4    <ul>
5      <li v-for="(msg, index) in messages" :key="index">
6        <strong>{{ msg.topic }}:</strong> {{ msg.data }}
7      </li>
8    </ul>
9  </div>
10</template>

五、关键配置说明

连接协议：

  • 浏览器端必须使用 ws://（非加密）或 wss://（加密）协议。
  • 端口通常为 8083（ws）或 8084（wss），需与服务器配置一致。

QoS 等级：

  • 0：至多一次（可能丢失）。
  • 1：至少一次（可能重复）。
  • 2：只有一次（确保到达）。

断线重连：

  • MQTT.js 默认自动重连，可通过 reconnectPeriod 调整重试间隔（毫秒）。

安全认证：

  • 若服务器启用认证，需在 options 中配置 username 和 password。

六、完整示例代码

<script setup>
2import { ref, onMounted, onBeforeUnmount } from 'vue';
3import mqtt from 'mqtt';
4
5const client = ref(null);
6const messages = ref([]);
7
8const connectMqtt = () => {
9  const options = {
10    keepalive: 30,
11    clientId: `vue3_${Math.random().toString(16).slice(2)}`,
12    clean: true,
13  };
14
15  client.value = mqtt.connect('ws://your_mqtt_server:8083/mqtt', options);
16
17  client.value.on('connect', () => {
18    console.log('Connected');
19    client.value.subscribe('test/topic', { qos: 1 }, (err) => {
20      if (!err) console.log('Subscribed');
21    });
22  });
23
24  client.value.on('message', (topic, message) => {
25    messages.value.push({ topic, data: JSON.parse(message.toString()) });
26  });
27
28  client.value.on('error', (err) => {
29    console.error('Error:', err);
30  });
31};
32
33onMounted(() => {
34  connectMqtt();
35});
36
37onBeforeUnmount(() => {
38  if (client.value) client.value.end();
39});
40</script>
41
42<template>
43  <div>
44    <h2>MQTT Messages</h2>
45    <ul>
46      <li v-for="(msg, index) in messages" :key="index">
47        <strong>{{ msg.topic }}:</strong> {{ msg.data }}
48      </li>
49    </ul>
50  </div>
51</template>

七、常见问题解决

连接失败：

  • 检查服务器地址是否为 ws:// 或 wss://。
  • 确认端口和路径（如 /mqtt）是否正确。

消息乱码：

  • 使用 message.toString() 转换 Uint8Array 为字符串。

跨域问题：

  • 若服务器未配置 CORS，需通过代理或修改服务器配置解决。

性能优化：

  • 高频消息时，使用防抖或节流减少渲染次数。
  • 合并消息或使用 QoS 0 降低开销。

以上就是在Vue3项目中使用MQTT获取数据的方法示例的详细内容，更多关于Vue3 MQTT获取数据的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Vue3中的pinia使用方法总结(建议收藏版)

    Vue3中的pinia使用方法总结(建议收藏版)

    Pinia是Vue的存储库,它允许您跨组件/页面共享状态,Pinia的成功可以归功于他管理存储数据的独特功,下面这篇文章主要给大家介绍了关于Vue3中pinia使用方法的相关资料,需要的朋友可以参考下
    2023-04-04
  • vue3使用echart的两种引入方式以及注意事项说明

    vue3使用echart的两种引入方式以及注意事项说明

    这篇文章主要介绍了vue3使用echart的两种引入方式以及注意事项说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • vue2.0父子组件间通信的实现方法

    vue2.0父子组件间通信的实现方法

    本篇文章主要介绍了vue2.0父子组件间通信的实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-04-04
  • 使用elementuiadmin去掉默认mock权限控制的设置

    使用elementuiadmin去掉默认mock权限控制的设置

    这篇文章主要介绍了使用elementuiadmin去掉默认mock权限控制的设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • Vue超详细讲解重试机制示例

    Vue超详细讲解重试机制示例

    这篇文章主要介绍了Vue重试机制示例，重试指的是当加载出错时，有能力重新发起加载组件的请求。异步组件加载失败后的重试机制，与请求服务端接口失败后的重试机制一样
    2023-01-01
  • 深入理解vue2.0路由如何配置问题

    深入理解vue2.0路由如何配置问题

    本篇文章主要介绍了vue2.0路由配置问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue自定义属性实例分析

    Vue自定义属性实例分析

    这篇文章主要介绍了Vue自定义属性,结合实例形式分析了vue.js自定义属性相关原理、实现方法及操作注意事项,需要的朋友可以参考下
    2019-02-02
  • 一文详解WebStorm如何调试Vue项目

    一文详解WebStorm如何调试Vue项目

    这篇文章主要介绍了如何使用WebStorm进行断点调试,包括配置、启动本地应用程序、设置断点以及使用调试工具等步骤,文中通过图文及代码介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • Vue2 Dialog弹窗函数式调用实践示例

    Vue2 Dialog弹窗函数式调用实践示例

    这篇文章主要为大家介绍了Vue2 Dialog弹窗函数式调用实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • vuex实现数据持久化的两种方案

    vuex实现数据持久化的两种方案

    这两天在做vue项目存储个人信息的时候,遇到了页面刷新后个人信息数据丢失的问题,在查阅资料后,我得出两种解决数据丢失,使用数据持久化的方法,感兴趣的小伙伴跟着小编一起来看看吧
    2023-08-08

最新评论