// 订阅mqtt消息通知
doSubscribe() {
const { topic, qos } = this.subscription;
this.client.subscribe(topic, { qos }, (error, res) => {
if (error) {
console.log("Subscribe to topics error", error);
return;
}
console.log("Subscribe to topics res", res);
});
this.client.on("message", (topic, message) => {
if (topic === this.subscription.userTopic) {
let msgObj = JSON.parse(`${message}`);
console.log(msgObj);
// 接收消息并弹框
this.notify(msgObj);
} else if (topic = this.subscription.trafficTopic) {
let traffic = JSON.parse(`${message}`);
// 接收mqtt推送消息时存入一个标识
const oldTraffic = localStorage.getItem('openNewEvent' + message)
// 当无标识的时候去set一个标识 并且打开新页签
if (!oldTraffic) {
localStorage.setItem('openNewEvent' + message, message)
// vue中浏览器打开新页签会被拦截 所有需提前打开一个新的空页签 去改变他的地址
const tempPage = window.open('', '_blank')
let url = this.$router.resolve({
path: `/event/addEvent/` + new Date().getTime(),
query: { phone: traffic }
});
const newhref = url.href
tempPage.location = newhref
// 当localStorage已有标识不进行处理
}else{
console.log('已开启无需再次处理');
}
当开启多个页签时 多个页签会同时去读取localStorage,其中只要又一个页面的localStorage抢先存入唯一标识 其余的则会走进else方法
在push的页面调用接口时去除localStorage,形成同步锁