云南网站建设小程序开发,wordpress网站小屏,电子网站游戏网址试玩,中国新农村建设网站前文写了使用Docker部署了mqtt服务#xff0c;今天来写一下#xff0c;mqtt在web开发中的应用实例#xff0c;希望能帮到大家#xff0c;话不多说#xff0c;直接开始。
一#xff1a;脚手架安装mqtt
作者这里用的vue3的框架 直接上命令#xff0c;npm安装或者pnpm进行…前文写了使用Docker部署了mqtt服务今天来写一下mqtt在web开发中的应用实例希望能帮到大家话不多说直接开始。
一脚手架安装mqtt
作者这里用的vue3的框架 直接上命令npm安装或者pnpm进行安装。
npm install mqtt二使用mqtt
1.创建一个mqtt封装的js文件 比如我创建一个mqttTool.js 2.在js文件中引入mqtt
import * as mqtt from mqtt/dist/mqtt.min.js;3.封装全局服务
const getMQTTUrl () {let url import.meta.env.VITE_APP_PHAR_MQTT;url ws://0.0.0.0:8000/mqtt; //填写自己的mqtt服务ipconsole.info(当前 MQTT 地址为 url);return url
}
//MQTT全局服务
export default class MQTTService {static instance null;static get Instance() {if (!this.instance) {this.instance new MQTTService();}return this.instance;}// 事件mitt new mitt();//配置参数userOptions {username: mqttName,password: test123,clientId: Math.random().toString(36).substr(2),};topics [];//[test1, dtest2]; //需要订阅的主题// 和服务端连接的MQTT对象client null;mqttUrl getMQTTUrl() ;// 标识是否连接成功connected false;// 记录重试的次数sendRetryCount 0;// 重新连接尝试的次数connectRetryCount 3;// 再次连接reconnect(){if (this.clientnull){this.connect()}}//定义连接服务器的方法connect() { let that this;this.client mqtt.connect(this.mqttUrl, this.userOptions);this.client.on(connect, (e) {this.connected true;// 重置重新连接的次数this.connectRetryCount 3;that.topics.forEach((topic) {that.client.subscribe(topic,{ qos: 0, retain: 0 },(err, granted) {if (granted.length 0) {if (!err) {console.log(全局成功订阅主题${granted[0].topic});} else {console.log(全局订阅主题失败, err);}}});});});//失败重连this.client.on(error, (e) {if (this.sendRetryCount this.connectRetryCount-1){console.log(连接服务端失败,e)this.connected false;this.sendRetryCountsetTimeout(() {this.connect();}, 500 * this.connectRetryCount);}});this.client.on(message, (topic, message, packet) {// 输出订阅的主题和消息console.log(接收到主题为 ${topic} 的消息, message.toString());let res {topic:topic,message:message,packet:packet}});}close(){ // 退出登录后断开连接if (this.client) {this.client.end(); //离开页面的时候 关闭mqtt连接this.client null;console.log(关闭mqtt);}}// 发送数据的方法send(data) {// 判断此时此刻有没有连接成功if (this.connected) {this.sendRetryCount 0;try {this.client.publish(data.sender, data);console.log(s发送到服务端,data);} catch (e) {this.client.publish(data.sender, JSON.stringify(data)); console.log(O发送到服务端,data)}} else {this.sendRetryCount;setTimeout(() {this.reconnect() // 重新连接this.client.publish(data.sender, JSON.stringify(data));}, this.sendRetryCount * 500);}}// 发送数据的方法2sendBySender(sender,data) {// 判断此时此刻有没有连接成功if (this.connected) {this.sendRetryCount 0;try {this.client.publish(sender, data);console.log(s发送到服务端,data)} catch (e) {this.client.publish(sender, JSON.stringify(data)); console.log(O发送到服务端,data)}} else {this.sendRetryCount;setTimeout(() {this.reconnect() // 重新连接this.client.publish(sender, JSON.stringify(data));}, this.sendRetryCount * 500);}}//自定义订阅内容setTopics(data){this.topics data;this.close();this.connect();}getTopics(){return this.topics;}//添加订阅addTopic(topic){this.topics.push(topic);if (this.connected) {this.client.subscribe(topic,{ qos: 0, retain: 0 },(err, granted) {if (granted.length 0) {if (!err) {console.log(全局成功订阅主题${granted[0].topic});} else {console.log(全局订阅主题失败, err);}}}); }else{this.connect();}}
}
4.调用 在需要的vue中调用
import MQTTService from //utils/mqttTool.js
let mqttServe MQTTService.Instance;
然后使用mqttServe对象调用相关方法即可。
