MQTT状态管理Vuex全局状态管理

1.uniapp集成MQTT协议，参考我的文章：https://www.cnblogs.com/zhangyouwu/p/19439905
2.创建store/index.js

1. // 页面路径：store/index.js
2. import { createStore } from 'vuex'
3. const store = createStore({
4.     state:{//存放状态
5.         "xcx_zt":0,//程序是否在线
6.         "m_zt":0,//设备是否在线
7.         'm_id':'',//设备ID
8.     },
9.     mutations: {
10.         chang_xcx_zt(state, n) {
11.             state.xcx_zt = n
12.         },
13.         chang_m_zt(state, n) {
14.             state.m_zt = n
15.         },
16.         chang_m_id(state, n) {
17.             state.m_id = n
18.         },
19.     }
20. })
22. export default store

复制代码

3.在 main.js 中导入文件，主要这2句

 

1. import store from './store'

复制代码

1. app.use(store)

复制代码

 4.修改mqtt.js

1. import mqtt from 'mqtt/dist/mqtt.min'
2. import store from '@/store/index.js'
3. // MQTT 配置（根据实际服务端修改）
4. const MQTT_CONFIG = {
5.     // 不同端的连接协议：
6.     // H5: ws://xxx:8083/mqtt 或 wss://xxx:8084/mqtt
7.     // 微信小程序: wxs://xxx:8084/mqtt（需配置域名白名单）
8.     // App: tcp://xxx:1883（需配置网络权限）
9.     host: 'wxs://xxx:8084/mqtt',
10.     // host: 'ws://xxx:8083/mqtt',
11.     clientId: `wine-${Math.random().toString(16).substr(2, 8)}`, // 唯一客户端ID
12.     username: 'zyw', // 服务端认证用户名（无则留空）
13.     password: 'zyw123456', // 服务端认证密码（无则留空）
14.     keepalive: 60, // 心跳间隔（秒）
15.     reconnectPeriod: 5000, // 重连间隔（毫秒）
16.     clean: true // 清除会话（true：断开后不保留订阅）
17. }
19. // 全局 MQTT 客户端实例
20. let client = null
21. // 消息回调函数（供页面监听）
22. let messageCallback = null
24. /**
25. * 连接 MQTT 服务器
26. * @param {Function} callback 消息接收回调 (topic, message) => {}
27. */
28. export function connectMQTT(callback) {
29.     // 保存消息回调
30.     messageCallback = callback
32.     // 已连接则直接返回
33.     if (client && client.connected){
34.         store.commit('chang_xcx_zt', 1)//在线
35.         return false;
36.     }
38.     // 创建连接
39.     client = mqtt.connect(MQTT_CONFIG.host, {
40.         clientId: MQTT_CONFIG.clientId,
41.         username: MQTT_CONFIG.username,
42.         password: MQTT_CONFIG.password,
43.         keepalive: MQTT_CONFIG.keepalive,
44.         reconnectPeriod: MQTT_CONFIG.reconnectPeriod,
45.         clean: MQTT_CONFIG.clean
46.     })
48.     // 连接成功回调
49.     client.on('connect', () => {
50.         console.log('MQTT 连接成功：', MQTT_CONFIG.clientId);
51.         if(MQTT_CONFIG.clientId){
52.             store.commit('chang_xcx_zt', 1)//在线
53.             if (messageCallback) {
54.                 var p_obj={};
55.                 var p_data={};
56.                
57.                 p_data.keyword="connect";
58.                 p_data.clientId=MQTT_CONFIG.clientId;
59.                 p_data.msg="MQTT 连接成功";
60.                
61.                 p_obj.code=1;
62.                 p_obj.data=p_data;
63.                 messageCallback(p_obj) // 转字符串便于处理
64.             }
65.         }
66.     })
68.     // 接收消息回调
69.     client.on('message', (topic, message) => {
70.         console.log(`收到消息1：topic=${topic}, message=${message.toString()}`)
71.         if (messageCallback) {
72.             messageCallback(topic, message.toString()) // 转字符串便于处理
73.         }
74.     })
76.     // 连接错误回调
77.     client.on('error', (error) => {
78.         console.error('MQTT 连接错误：', error)
79.         store.commit('chang_xcx_zt', 0)//离线
80.         if (messageCallback) {
81.             var p_obj={};
82.             var p_data={};
83.             p_data.keyword="error";
84.             p_data.error=error;
85.             p_data.msg="MQTT 连接错误";
86.             
87.             p_obj.code=1;
88.             p_obj.data=p_data;
89.             messageCallback(p_obj) // 转字符串便于处理
90.         }
91.         
92.     })
94.     // 断开连接回调
95.     client.on('close', () => {
96.         console.log('MQTT 连接断开');
97.         store.commit('chang_xcx_zt', 0)//离线
99.         if (messageCallback) {
100.             var p_obj={};
101.             var p_data={};
102.             p_data.keyword="close";
103.             p_data.msg="MQTT 连接断开";
104.             
105.             p_obj.code=1;
106.             p_obj.data=p_data;
107.             messageCallback(p_obj) // 转字符串便于处理
108.         }
109.     })
111.     // 重连回调
112.     client.on('reconnect', () => {
113.         console.log('MQTT 正在重连...')
114.         store.commit('chang_xcx_zt', 0)//离线
115.         if (messageCallback) {
116.             var p_obj={};
117.             var p_data={};
118.             p_data.keyword="reconnect";
119.             p_data.msg="MQTT 正在重连";
120.             
121.             p_obj.code=1;
122.             p_obj.data=p_data;
123.             messageCallback(p_obj) // 转字符串便于处理
124.         }
125.     })
126. }
127. /**
128. * 断开 MQTT 连接
129. */
130. export function disconnectMQTT(callback) {
131.     if (client && client.connected) {
132.         // 保存消息回调
133.         messageCallback = callback
134.         client.end()
135.         client = null
136.         console.log('MQTT 主动断开连接')
137.         store.commit('chang_xcx_zt', 0)//离线
138.         if (messageCallback) {
139.             var p_obj={};
140.             var p_data={};
141.             p_data.keyword="disconnect";
142.             p_data.msg="MQTT 主动断开连接";
143.             
144.             p_obj.code=1;
145.             p_obj.data=p_data;
146.             messageCallback(p_obj) // 转字符串便于处理
147.         }
148.         
149.     }
150. }
152. /**
153. * 订阅 MQTT 主题
154. * @param {String|Array} topic 主题（单个字符串或数组）
155. * @param {Number} qos 服务质量（0/1/2，默认0）
156. */
157. export function subscribeMQTT(topic, qos = 0) {
158.   if (!client || !client.connected) {
159.     console.error('MQTT 未连接，无法订阅')
160.     return
161.   }
162.   client.subscribe(topic, { qos }, (error) => {
163.     if (error) {
164.       console.error(`订阅主题 ${topic} 失败：`, error)
165.     } else {
166.       console.log(`订阅主题 ${topic} 成功`)
167.     }
168.   })
169. }
171. /**
172. * 发布 MQTT 消息
173. * @param {String} topic 主题
174. * @param {String|Object} message 消息内容（对象会转为JSON字符串）
175. * @param {Number} qos 服务质量（0/1/2，默认0）
176. */
177. export function publishMQTT(topic, message, qos = 0) {
178.   if (!client || !client.connected) {
179.     console.error('MQTT 未连接，无法发布消息')
180.     return
181.   }
182.   // 统一转为字符串
183.   const msg = typeof message === 'object' ? JSON.stringify(message) : message
184.   client.publish(topic, msg, { qos }, (error) => {
185.     if (error) {
186.       console.error(`发布消息到 ${topic} 失败：`, error)
187.     } else {
188.       console.log(`发布消息到 ${topic} 成功：`, msg)
189.     }
190.   })
191. }
193. /**
194. * 取消订阅 MQTT 主题
195. * @param {String|Array} topic 主题（单个字符串或数组）
196. */
197. export function unsubscribeMQTT(topic) {
198.   if (!client || !client.connected) {
199.     console.error('MQTT 未连接，无法取消订阅')
200.     return
201.   }
202.   client.unsubscribe(topic, (error) => {
203.     if (error) {
204.       console.error(`取消订阅 ${topic} 失败：`, error)
205.     } else {
206.       console.log(`取消订阅 ${topic} 成功`)
207.     }
208.   })
209. }
212. mqtt.js

复制代码

mqtt.js5.创建在线组件/components/online/online.vue,其中2个getApp().add_log方法是上传连接日志到服务器，请自行删除

1. <template>
2.     <view>
3.         <view class="topfixed">
4.             <view class="topfixed_content">
5.                
6.                 <view class="topNavBox">
7.                     <view class="leftBtnBox">
8.                         <view class="gobackBox color-white font-28">
9.                             <view>设备：</view>
10.                             <block v-if="m_zt==1">
11.                                 <view class="flex">
12.                                     <u-icon name="pause-circle-fill" color="#00AA59" size="18"></u-icon>
13.                                     <view class="ml6">在线</view>
14.                                 </view>
15.                             </block>
16.                            
17.                             <block v-else>
18.                                 <view class="flex">
19.                                     <u-icon name="minus-circle-fill" color="#ff0000" size="18"></u-icon>
20.                                     <view class="ml6">离线</view>
21.                                 </view>
22.                             </block>
23.                         </view>
24.                         
25.                     </view>
26.                 </view>
27.                
28.                 <view class="topNavBox">
29.                     <view class="leftBtnBox">
30.                         <view class="gobackBox color-white font-28">
31.                             <view>程序：</view>
32.                             <block v-if="xcx_zt==1">
33.                                 <view class="flex" @click="disconnect">
34.                                     <u-icon name="pause-circle-fill" color="#00AA59" size="18"></u-icon>
35.                                     <view class="ml6">在线</view>
36.                                 </view>
37.                             </block>
38.                            
39.                             <block v-else>
40.                                 <view class="flex" @click="connect">
41.                                     <u-icon name="minus-circle-fill" color="#ff0000" size="18"></u-icon>
42.                                     <view class="ml6">离线</view>
43.                                 </view>
44.                             </block>
45.                         </view>
46.                         
47.                     </view>
48.                 </view>
49.             </view>
50.         </view>
51.     </view>
52. </template>

复制代码

online.vue6.App.vue内容，其中add_log方法是上传连接日志到服务器，请自行删除

1. [/code] 
2. 7.创建测试文件/pages/index/index.vue,其中tabBar是我自定义的菜单组件，请自行删除
3. [align=center] [/align][align=center] [/align][code]<template>
4.     <view class="">
5.         <view>
6.             <online></online>
7.         </view>
8.         <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :style="'height:'+windowHeight*2+'rpx;'">
9.             
10.         </map>
11.         
12.         <view>
13.             <tabBar :pageIndex="100" :textType="1" @toTab="toTab"></tabBar>
14.         </view>
15.     </view>
16. </template>

复制代码

index.vue结果

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！