使用localStorage形成同步锁

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值