单位做网站图片素材,用视频做背景的网站,wordpress本地安装,网站建设皿金手指谷哥壹柒在vue中使用MQTT 最近有个需求#xff0c;需要前端直接链接mqtt#xff0c;想到后面可能多出使用#xff0c;就封装成了hooks 中间遇到了一个坑#xff0c;就是浏览器默认不支持mqtt协议#xff0c;其借助了webSocket实现的mqtt协议#xff0c; 而mqtt默认未开启webSocke…在vue中使用MQTT 最近有个需求需要前端直接链接mqtt想到后面可能多出使用就封装成了hooks 中间遇到了一个坑就是浏览器默认不支持mqtt协议其借助了webSocket实现的mqtt协议 而mqtt默认未开启webSocket官网中并说明但其demo中都是使用的ws最后通过不断的摸索确认是 需要在配置中进行相关配置
安装mqtt插件
pnpm add mqtt
or
npm i mqtt
or
yarn add mqtt
导入mqtt
import * as mqtt from mqtt/dist/mqtt.min
封装
这个封装只需要稍加改动就能在react中使用 import * as mqtt from mqtt/dist/mqtt.min;
import {onUnmounted, reactive, ref} from vue;export default function useMqtt(options, getMessage) {const data ref();const connection reactive({protocol: options.host ?? ws,host: options.host ?? 81.69.203.93,port: options.port ?? 8083,clientId: options.clientId ?? mqttx_ Math.random().toString(16).substring(2, 8),username: options.username ?? bduser,password: options.password ?? 123456,clean: options.clean ?? true,connectTimeout: options.connectTimeout ?? 30 * 1000, // msreconnectPeriod: options.reconnectPeriod ?? 4000 // ms});/*** 订阅信息设置*/const subscription ref({topic: options.subscription.topic, //需要动态配置qos: options.subscription.qos});let client ref({connected: false});const receivedMessages ref();const subscribedSuccess ref(false);const btnLoadingType ref();const retryTimes ref(0);/*** 初始化*/const initData () {client.value {connected: false};retryTimes.value 0;btnLoadingType.value ;subscribedSuccess.value false;};const handleOnReConnect () {console.log(第${retryTimes.value}次重试);retryTimes.value 1;if (retryTimes.value 5) {try {client.value.end();initData();} catch (error) {console.error(error)}}};/*** 创建连接*/const createConnection () {try {btnLoadingType.value connect;console.log(connection-----, connection)const {protocol, host, port, ...options} connection;const connectUrl ${protocol}://${host}:${port}/mqtt;client.value mqtt.connect(connectUrl, options);if (client.value.on) {client.value.on(connect, () {btnLoadingType.value ;console.log(------链接建立成功------);});client.value.on(reconnect, handleOnReConnect);client.value.on(error, (error) {console.error(------链接建立失败------, error)});client.value.on(message, (topic, message) {receivedMessages.value receivedMessages.value.concat(message.toString());data.value JSON.parse(message);if (getMessage) getMessage(message);console.log(收到的数据--------------, data.value);});}} catch (error) {btnLoadingType.value ;console.error(链接出错, error);}};/*** 订阅消息*/const doSubscribe () {btnLoadingType.value subscribe;const {topic, qos} subscription.value;console.log(订阅消息-------, $queue${topic}, qos);client.value.subscribe($queue${topic}, {qos}, (error, granted) {btnLoadingType.value ;if (error) {console.log(subscribe error:, error);return;}subscribedSuccess.value true;console.log(subscribe successfully:, granted);});};/*** 关闭连接*/const destroyConnection () {if (client.value.connected) {btnLoadingType.value disconnect;try {client.value.end(false, () {initData();console.log(disconnected successfully);});} catch (error) {btnLoadingType.value ;console.log(disconnect error:, error);}}};/*** 发送消息* param data*/const publishMessage (data) {btnLoadingType.value publish;const {topic, qos} subscription.valueconsole.log(发送消息到【${topic}】-【${qos}】)client.value.publish(${topic}, data, {qos}, (error) {btnLoadingType.value ;if (error) {console.error(消息发送失败, error);return;}console.log(消息内容${data});});};/*** 取消订阅*/const doUnSubscribe () {btnLoadingType.value unsubscribe;const {topic, qos} subscription.value;console.warn(取消订阅-------, $queue${topic}, qos);client.value.unsubscribe($queue${topic}, {qos}, (error) {btnLoadingType.value ;subscribedSuccess.value false;if (error) {console.log(unsubscribe error:, error);return;}console.log(unsubscribed topic: ${topic});});};/*** 创建连接并订阅*/const createAndDo () {createConnection();doSubscribe();}// //组件销毁前断开连接onUnmounted(() {console.log(------页面销毁前断开连接------);destroyConnection();});return {data,publishMessage,connection,subscription,doUnSubscribe,destroyConnection,createConnection,doSubscribe,createAndDo};
}
