使用localStorage形成同步锁

oyxm____

已于 2022-08-01 15:26:40 修改

阅读量486

点赞数

文章标签： javascript 前端 vue.js

于 2022-08-01 15:18:27 首次发布

本文链接：https://blog.csdn.net/oyxm____/article/details/126101951

版权

该博客主要介绍了如何订阅和处理MQTT消息。在接收到特定主题的消息时，程序会进行解析并显示，同时针对不同情况决定是否打开新标签页进行处理。在多页签环境下，利用localStorage作为同步锁避免重复操作。在处理完页面逻辑后，会清除localStorage中的标识，确保流程的同步性。

摘要由CSDN通过智能技术生成

    // 订阅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，形成同步锁