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

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

npm install mqtt
# 或
yarn add 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};

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>

<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>