vue项目使用mqtt（前端部分）
大部分项目中，前后端交互只是前端请求后端接口，拿到返回的数据之后再处理即可，但是还是有些需要等待后端处理完成之后，主动通知前端，比如异步支付、消息通知等需求，或者前端自己两个页面间通信，尤其是那种需要实时更新却不方便通过传参等方式解决的，mqtt就可以很好的解决这些问题关于mqtt原理等的文章已经有很多，此文仅是记录前端在vue项目中使用的实例，方便刚接触mqtt的前端朋友快速入门使用1、使用前的
·
大部分项目中，前后端交互只是前端请求后端接口，拿到返回的数据之后再处理即可，但是还是有些需要等待后端处理完成之后，主动通知前端，比如异步支付、消息通知等需求，或者前端自己两个页面间通信，尤其是那种需要实时更新却不方便通过传参等方式解决的，mqtt就可以很好的解决这些问题
关于mqtt原理等的文章已经有很多，此文仅是记录前端在vue项目中使用的实例，方便刚接触mqtt的前端朋友快速入门使用
1、使用前的准备工作
先创建一些基础方法方便使用
// 准备好日期、随机、判断等基础方法
Date.prototype.Format = function (fmt) {
let o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (let k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
let random = function(n) {
let res = '';
for (; res.length < n; res += Math.random().toString(36).substr(2).toUpperCase()) {}
return res.substr(0, n)
};
let datePrefixRandomStr = function(len){
return new Date().Format("yyMMddhhmmss-")+ random(len) ;
};
let isNotNull = function (obj) {
return null !== obj && undefined !== obj;
};
2、创建订阅者方法
hostname、port、topic、username、password等参数都需要按照自己项目实际填写，可以直接问部署mqtt服务器相关人员，其他的可以参考以下，或者根据项目实际需求更改
// 处理初始值、订阅者方法
let MqttConsumer = function(jsonParam) {
if (!jsonParam.topic){
throw "topic不能为空";
}
this.hostname = isNotNull(jsonParam.hostname) ? jsonParam.hostname : '127.0.0.1';
// this.port = null;
this.port = isNotNull(jsonParam.port) ? jsonParam.port : 8084;
this.clientId = isNotNull(jsonParam.clientId) ? jsonParam.clientId : 'ws-consumer-' + datePrefixRandomStr(5);
this.timeout = isNotNull(jsonParam.timeout) ? jsonParam.timeout : 5;
this.keepAlive = isNotNull(jsonParam.keepAlive) ? jsonParam.keepAlive : 10;
this.reConnectionTimeout = isNotNull(jsonParam.reConnectionTimeout) ? jsonParam.reConnectionTimeout * 1000 : 5000;
this.cleanSession = isNotNull(jsonParam.cleanSession) ? jsonParam.cleanSession : true;
this.ssl = isNotNull(jsonParam.ssl) ? jsonParam.ssl : false;
this.userName = jsonParam.userName;
this.password = jsonParam.password;
this.topic = jsonParam.topic;
this.qos = isNotNull(jsonParam.qos) ? jsonParam.qos : 2;
this.client = null;
this.connParam = null;
};
// 订阅者准备工作
MqttConsumer.prototype.prepareParam = function(fnConnectionFail, fnConnectionSuccess){
let self = this;
self.connParam = {
invocationContext: {
host : self.hostname,
port: self.port,
path: "/mqtt",
clientId: self.clientId
},
timeout: self.timeout,
keepAliveInterval: self.keepAlive,
cleanSession: self.cleanSession,
useSSL: self.ssl,
userName: self.userName,
password: self.password,
onSuccess: function(){
console.info(self.clientId + ": 连接成功");
fnConnectionSuccess && fnConnectionSuccess.call(this);
self.client.subscribe(self.topic, { qos: self.qos});
},
onFailure: function(e){
console.log(self.clientId + ": 连接服务器失败," + e.errorMessage);
try {
fnConnectionFail && fnConnectionFail.call(this, e);
} catch (e) {}
let reconnect = setInterval(function () {
try {
console.log(self.clientId + ": 重连中...");
delete self.connParam.mqttVersion;
delete self.connParam.mqttVersionExplicit;
self.client.connect(self.connParam);
clearInterval(reconnect), reconnect = null;
} catch (e) {
console.log();
}
}, self.reConnectionTimeout);
}
};
};
// 连接
MqttConsumer.prototype.connect = function(fnOnMessage, fnConnectionFail, fnConnectionSuccess, fnConnectionLost){
this.prepareParam(fnConnectionFail, fnConnectionSuccess);
this.client = new Paho.MQTT.Client(this.hostname, this.port, this.clientId);
this.client.connect(this.connParam);
let self = this;
self.client.onConnectionLost = function(responseObject) {
(function(){
if (responseObject.errorCode !== 0) {
console.log(self.clientId + ": 与服务器断开连接，" + responseObject.errorMessage);
let interval = setInterval(function () {
try {
console.log(self.clientId + "：重连中...");
self.prepareParam(fnConnectionFail, fnConnectionSuccess);
self.client.connect(self.connParam);
clearInterval(interval), interval = null;
} catch (e) {
console.log(e);
}
}, self.reConnectionTimeout);
}
})();
fnConnectionLost && fnConnectionLost.call(this);
};
self.client.onMessageArrived = function(messageBody) {
try{
fnOnMessage && fnOnMessage.call(this, messageBody.destinationName, messageBody.payloadString, messageBody.qos, messageBody.retained);
} catch(ex){
console.error(ex);
}
};
};
3、创建发布者方法
发布者处方法和订阅者类似
let MqttProducer = function(jsonParam) {
this.hostname = isNotNull(jsonParam.hostname) ? jsonParam.hostname : '127.0.0.1';
this.port = isNotNull(jsonParam.port) ? jsonParam.port : 8084;
this.clientId = isNotNull(jsonParam.clientId) ? jsonParam.clientId : 'ws-producer-' + datePrefixRandomStr(5);
this.timeout = isNotNull(jsonParam.timeout) ? jsonParam.timeout : 5;
this.keepAlive = isNotNull(jsonParam.keepAlive) ? jsonParam.keepAlive : 10;
this.reConnectionTimeout = isNotNull(jsonParam.reConnectionTimeout) ? jsonParam.reConnectionTimeout * 1000 : 5000;
this.cleanSession = isNotNull(jsonParam.cleanSession) ? jsonParam.cleanSession : true;
this.ssl = isNotNull(jsonParam.ssl) ? jsonParam.ssl : false;
this.userName = jsonParam.userName;
this.password = jsonParam.password;
this.qos = isNotNull(jsonParam.qos) ? jsonParam.qos : 2;
this.client = null;
this.connParam = null;
};
MqttProducer.prototype.prepareParam = function(fnConnectionFail, fnConnectionSuccess){
let self = this;
self.connParam = {
invocationContext: {
host : self.hostname,
port: self.port,
path: "/mqtt",
clientId: self.clientId
},
timeout: self.timeout,
keepAliveInterval: self.keepAlive,
cleanSession: self.cleanSession,
useSSL: self.ssl,
userName: self.userName,
password: self.password,
onSuccess: function(){
console.info(self.clientId + ": 连接成功");
fnConnectionSuccess && fnConnectionSuccess.call(this);
},
onFailure: function(e){
console.warn(self.clientId + ": 连接服务器失败," + e.errorMessage);
try {
fnConnectionFail && fnConnectionFail.call(this, e);
} catch (e) {}
let reconnect = setInterval(function () {
try {
console.warn(self.clientId + ": 重连中...");
delete self.connParam.mqttVersion;
delete self.connParam.mqttVersionExplicit;
self.client.connect(self.connParam);
clearInterval(reconnect), reconnect = null;
} catch (e) {
console.warn(e);
}
}, self.reConnectionTimeout);
}
};
};
MqttProducer.prototype.connect = function(fnConnectionFail, fnConnectionSuccess, fnConnectionLost){
this.prepareParam(fnConnectionFail, fnConnectionSuccess);
this.client = new Paho.MQTT.Client(this.hostname, this.port, this.clientId);
this.client.connect(this.connParam);
let self = this;
self.client.onConnectionLost = function(responseObject) {
(function(){
if (responseObject.errorCode !== 0) {
console.warn(self.clientId + ": 与服务器断开连接，" + responseObject.errorMessage);
let interval = setInterval(function () {
try {
console.warn(self.clientId + "：重连中...");
self.prepareParam(fnConnectionFail, fnConnectionSuccess);
self.client.connect(self.connParam);
clearInterval(interval), interval = null;
} catch (e) {
console.warn(e);
}
}, self.reConnectionTimeout);
}
})();
fnConnectionLost && fnConnectionLost.call(this);
};
};
// 发送消息的发方法
MqttProducer.prototype.send = function (topic, msg, qos) {
let message = new Paho.MQTT.Message(msg);
message.destinationName = topic;
message.qos = isNotNull(qos) ? qos : this.qos;
this.client.send(message);
}
4、使用
这里直接举例前端从发送消息到接收的简单过程
先在页面中创建发布者
function createProducer() {
producer = new MqttProducer({
hostname : ‘http://xxx.com/mqtt’, // 此处为服务端mqtt域名，需后端配置
port : 8084, // 端口按照实际的来
userName : 'username', // 用户名
password : 'password' // 密码
});
producer.connect();
}
然后发送消息
注意：topic需要和订阅者的topic相同，才能接收到消息
function sendMQTTmessage(user, message) {
// topic需要和接收者的topic相同，才能接收到消息，此处user是我用来确定发布和接收者唯一性的参数
let topic = `/mqtt/m/${user}`
// message就是需要发送的消息内容，需要string类型
producer.send(topic, message);
}
在接收页创建订阅者
注意：订阅处配置需要和发布处相同
// 初始化mqtt连接等
function registerMqttConsumer(user) {
let consumer = new MqttConsumer({
hostname : ‘http://xxx.com/mqtt’,
port : 8084,
userName : 'username',
password : 'password',
topic : `/mqtt/m/${user}`
});
consumer.connect((topic, message, qos, retained) => {
// 接收到消息了
});
}
5、使用过的其他情况
注意：如果项目使用的mqtt通知消息时，主题topic有多个层级，但是主要区别是最后一个层级的话，也可以只订阅一次，订阅时topic使用多层通配符---->“#”，“#”是用于匹配主题中任意层级的通配符，需要注意的是无论什么时候，它都必须是主题过滤器的最后一个字符 .
比如如下情况，就可以订阅到/mqtt/m/ 下所有发出的消息，此种情况下可以直接在接收到消息的时候判断topic完整的主题字符串找出当前发的消息具体是哪个，然后再继续做处理即可
function registerMqttConsumer(user) {
let consumer = new MqttConsumer({
hostname : ‘http://xxx.com/mqtt’,
port : 8084,
userName : 'username',
password : 'password',
topic : `/mqtt/m/#`
});
consumer.connect((topic, message, qos, retained) => {
// 接收到消息了
});
}
以上即为前端使用mqtt的完整步骤，mqttws31.js的文件我会把链接放上，以上。
https://download.csdn.net/download/xt_XiTu/12488593?spm=1001.2014.3001.5503
这种方法是几年前刚接触mqtt时的公司中的用法，实际项目中使用时可以直接在npm上寻找适合需求的插件
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献4条内容
所有评论(0)