Vue3毗连MQTT作为客户端

先下载依赖

2. npx --yes --registry https://registry.npmmirror.com npm install mqtt

复制代码

在src的api创建   mes.js

2. // 导入axios
3. import axios from 'axios';
5. // 定义一个变量,记录公共的前缀, baseURL
6. const baseURL = 'http://localhost:8080';
7. const instance = axios.create({ baseURL });
9. // 添加响应拦截器
10. instance.interceptors.response.use(
11.     (response) => {
12.         return response.data; // 直接返回响应的数据部分
13.     },
14.     (error) => {
15.         alert('服务异常');
16.         return Promise.reject(error); // 异步的状态转化成失败的状态
17.     }
18. );
20. // 定义 meslist 函数，使用定制的 Axios 实例发送请求
21. export const meslist = async (topic) => {
22.   try {
23.     const response = await instance.get('/getmes', {
24.       params: {
25.         topic: topic
26.       }
27.     });
28.     return response; // 返回整个响应对象，因为拦截器已经提取了 data 部分
29.   } catch (error) {
30.     console.error('API 请求失败:', error);
31.     throw error;
32.   }
33. };
35. export default instance;

复制代码

创建一个vue文件，然后填自己的ip，如果设置了用户名暗码也填上

2. <script setup>
3. import { ref, onMounted, onUnmounted, watch } from 'vue';
4. import { ElMessage, ElButton, ElInput, ElTable, ElTableColumn } from 'element-plus';
5. import mqtt from 'mqtt'; // 导入 mqtt，默认导出的是客户端工厂函数
6. import { meslist } from '@/api/mes'; // 引入 meslist API
8. // 响应式变量
9. const SelectTopic = ref(''); // 可以动态修改的选择项（如输入框内容）
10. const results = ref([]);     // 用来存储搜索结果
11. const loading = ref(false);  // 用于控制加载状态
12. const error = ref(null);     // 用于显示错误信息给用户
13. let client;
15. // 搜索函数
16. const search = async () => {
17.   if (!SelectTopic.value.trim()) {
18.     ElMessage.warning("请输入有效的搜索内容");
19.     return;
20.   }
22.   loading.value = true; // 开始加载
23.   error.value = null;   // 清除之前的错误信息
25.   try {
26.     const response = await meslist(SelectTopic.value);
28.     console.log('API Response:', response); // 输出原始响应以便调试
30.     // 如果是数组，则按照新逻辑处理
31.     if (Array.isArray(response)) {
32.       if (response.length > 0) {
33.         results.value = response;
34.         console.log('搜索成功:', results.value);
35.       } else {
36.         ElMessage.info('未找到相关结果');
37.         results.value = [];
38.       }
39.     }
40.     // 如果都不是，则抛出异常
41.     else {
42.       throw new Error('API 返回的数据格式不正确');
43.     }
44.   } catch (err) {
45.     // 更详细的错误信息记录
46.     console.error('搜索失败:', err);
47.     ElMessage.error('搜索失败，请稍后重试或检查网络连接');
48.     results.value = [];
49.   } finally {
50.     loading.value = false; // 搜索完成，结束加载状态
51.   }
52. };
54. // MQTT 连接配置
55. const connectMqtt = () => {
56.   const brokerUrl = 'ws://ip/mqtt'; // 使用提供的主机名、端口和路径
57.   const clientId = 'emqx_MTgwND'; // 客户端 ID
58.   const options = {
59.     username: 'web', // 替换为实际的用户名~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
60.     password: '123',   // 替换为实际的密码~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
61.     keepalive: 60,          // Keepalive 时间
62.     clean: true,            // Clean Start
63.     sessionExpiryInterval: 0, // 会话过期时间
64.     protocolVersion: 5,     // 协议版本 MQTT 5
65.   };
67.   client = mqtt.connect(brokerUrl, options);
69.   client.on('connect', () => {
70.     console.log('Connected to MQTT broker');
71.     if (SelectTopic.value.trim()) {
72.       client.subscribe(SelectTopic.value, (err) => {
73.         if (err) {
74.           console.error('Failed to subscribe:', err);
75.         } else {
76.           console.log('Subscribed to topic:', SelectTopic.value);
77.         }
78.       });
79.     }
80.   });
82.   client.on('message', (topic, message) => {
83.     console.log('Received message:', topic, message.toString()); // 调试信息
84.     try {
85.       const msg = JSON.parse(message.toString());
86.       // 更新结果列表
87.       results.value = [...results.value, {
88.         id: msg.id || 0,
89.         topic: topic,
90.         payload: msg.payload || message.toString(),
91.         qos: msg.qos || 0,
92.         timestamp: new Date().toLocaleString()
93.       }];
94.     } catch (e) {
95.       console.error('Failed to parse message:', e);
96.       // 如果解析失败，直接将原始消息作为字符串处理
97.       results.value = [...results.value, {
98.         id: -1,
99.         topic: topic,
100.         payload: message.toString(),
101.         qos: 0,
102.         timestamp: new Date().toLocaleString()
103.       }];
104.     }
105.   });
107.   client.on('error', (err) => {
108.     console.error('MQTT connection error:', err);
109.   });
111.   client.on('close', () => {
112.     console.log('MQTT connection closed');
113.   });
114. };
116. // 断开 MQTT 连接
117. const disconnectMqtt = () => {
118.   if (client) {
119.     client.end();
120.     client = null;
121.   }
122. };
124. // 监听 SelectTopic 的变化
125. watch(SelectTopic, (newVal) => {
126.   if (newVal.trim()) {
127.     disconnectMqtt();
128.     connectMqtt();
129.   } else {
130.     disconnectMqtt();
131.   }
132. });
134. // 在组件挂载时启动 MQTT 连接
135. onMounted(() => {
136.   if (SelectTopic.value.trim()) {
137.     connectMqtt();
138.   }
139. });
141. // 在组件卸载时断开 MQTT 连接
142. onUnmounted(() => {
143.   disconnectMqtt();
144. });
145. </script>
147. <template>
148.   <div class="container">
149.     <h1 class="title">历史数据查看</h1>
151.     <div class="input-container">
152.       <el-input
153.         v-model="SelectTopic"
154.         placeholder="请输入搜索内容"
155.         size="large"
156.         clearable
157.         class="input-box"
158.       />
159.     </div>
161.     <div class="button-container">
162.       <el-button
163.         type="primary"
164.         @click="search"
165.         :loading="loading"
166.         class="search-button"
167.       >
168.         {{ loading ? "加载中..." : "搜索" }}
169.       </el-button>
170.     </div>
172.     <!-- 搜索结果表格 -->
173.     <el-table v-if="results.length > 0" :data="results" style="width: 100%" border>
174.       <el-table-column prop="id" label="ID" width="100"></el-table-column>
175.       <el-table-column prop="qos" label="QoS" width="100"></el-table-column>
176.       <el-table-column prop="payload" label="Payload"></el-table-column>
177.       <el-table-column prop="timestamp" label="Timestamp" width="200">
178.         <template #default="scope">
179.           {{ scope.row.timestamp }}
180.         </template>
181.       </el-table-column>
182.     </el-table>
184.     <!-- 如果没有数据或错误时的提示 -->
185.     <div v-else-if="!loading && SelectTopic.trim()">
186.       <p class="error-message">{{ error || '没有找到相关结果' }}</p>
187.     </div>
189.     <div v-else-if="!loading">
190.       <p class="placeholder-message">请输入搜索内容</p>
191.     </div>
192.   </div>
193. </template>
195. <style scoped>
196. /* 设置容器样式 */
197. .container {
198.   padding: 40px;
199.   max-width: 1000px;
200.   margin: 0 auto;
201.   background-color: #f7f7f7;
202.   border-radius: 8px;
203.   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
204. }
206. /* 标题样式 */
207. .title {
208.   font-size: 28px;
209.   font-weight: bold;
210.   color: #333;
211.   text-align: center;
212.   margin-bottom: 30px;
213. }
215. /* 输入框容器样式 */
216. .input-container {
217.   display: flex;
218.   justify-content: center;
219.   margin-bottom: 20px;
220. }
222. /* 输入框样式 */
223. .input-box {
224.   width: 50%;
225.   font-size: 16px;
226. }
228. /* 按钮容器样式 */
229. .button-container {
230.   display: flex;
231.   justify-content: center;
232.   margin-bottom: 20px;
233. }
235. /* 按钮样式 */
236. .search-button {
237.   width: 200px;
238.   height: 40px;
239.   font-size: 16px;
240. }
242. /* 错误消息样式 */
243. .error-message {
244.   color: red;
245.   text-align: center;
246.   font-size: 16px;
247. }
249. /* 占位符消息样式 */
250. .placeholder-message {
251.   text-align: center;
252.   font-size: 16px;
253.   color: #888;
254. }
255. </style>

复制代码

在输入框输入，就可以订阅相应的主题了，然后其他客户端发送此主题的内容，就可以订阅吸收到了。由于我的代码内里尚有给后端发哀求的部分，以是干系后端接口必要你们自己完成大概把这部分的代码删掉。