多个页面 websocket 接收消息重复提醒问题

背景 :

网站登录成功后, 连接 websocket 接收消息, 网站可多标签页打开, 造成多个标签页都接受消息, 重复提醒

最开始是方案一状态了, 随后改成二, 发现问题后改成三, 最终方案为三

方案一:

  1. 每个页面登录成功后, 存储时间戳到页面程序时, 同时也存储到 localStorage (数组, JSON 形式)中, 退出登录, 出错, 重连, 页面关闭/刷新(beforeUnload) 时, 从 localStorage 中去掉该时间戳
  2. 页面接受到消息时, 判断当前页面时间戳是不是 localStorage 时间戳中的最大值, 是的话才提醒
  3. 弊端: localStorage 不会主动消失, 某些情况下时间戳最大的页面意外关闭后, localStorage 中仍存在值(遇到过, 但是没找到原因), 导致无提醒

方案二:

  1. 使用 cookie 替代 localStorage , 设置 cookie 自动过期, 随后使用 setInterval 为 cookie 定时延长有效期, 一旦页面关闭, cookie 过期自动消失
  2. 弊端 :
    1. setInterval 不一定准时执行, 可能导致某一时刻 cookie 中数据为空, 不提醒
    2. 页面在后台时, 一定时间后 chrome 会停止/延缓执行 setInterval , 导致数据为空, 不提醒
  3. 解决方案
    1. 网上搜索, 说可以用 web worker 让 setInterval 不休眠, 但是用了它我就不需要用 cookie 和 setInterval 了, 之前就是考虑到兼容性才不用它的
    2. 或者一些别的 hack (有人说播放一个空声音可以让 setInterval 不休眠)
    3. 最终决定用方案三

方案三:

  1. 参考 一种简单无副作用的同源跨页面数据同步方案 , 使用 sessionStorage 存储数据, 使用 localStorage 和 storage 监听来同步数据到 sessionStorage

后续:

方案三还是不行, sessionStorage 同步其他标签页的数据, 需要一定时间, 而 websocket 连接更快, 有个需求是 websocket 导致 websocket onopen 检测当前标签页数组时, 只能检查到当前标签页

于是改为延时 5s 再去检测标签页数组, 如果检测到数组当前标签页是标签页数组最小时间戳, 则发送 websocket 消息踢掉其他端; 但是, 如果用户点的块, 快速打开两个窗口, 这样会导致第二个窗口被踢掉, 等于还是有问题

相关推荐
DoraBigHead14 分钟前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
今天头发还在吗40 分钟前
【框架演进】Vue与React的跨越性变革:从Vue2到Vue3,从Class到Hooks
javascript·vue.js·react.js
渣哥1 小时前
从 AOP 到代理:Spring 事务注解是如何生效的?
前端·javascript·面试
toobeloong1 小时前
Electron 从低版本升级到高版本 - 开始使用@electron/remote的改造教程
前端·javascript·electron
悠哉摸鱼大王1 小时前
前端获取设备视频流踩坑实录
前端·javascript
铅笔侠_小龙虾1 小时前
深入理解 Vue.js 原理
前端·javascript·vue.js
你的眼睛會笑1 小时前
vue3 使用html2canvas实现网页截图并下载功能 以及问题处理
前端·javascript·vue.js
Hilaku2 小时前
技术Leader的“第一性原理”:我是如何做技术决策的?
前端·javascript·面试
渣哥3 小时前
面试高频:Spring 事务传播行为的核心价值是什么?
javascript·后端·面试