用webwoker解决客服系统业务上的问题

之前开发客服系统的一个问题,就是用websocket发送的心跳包,无缘无故断连了,经过排查,发现发送心跳包的定时器停止了,通过查了相关资料,总结如下:

当页面变为非活动状态时,WebKit 会自动采取措施来节省电量,导致计时器受到限制。

什么是非活跃状态?

  1. 用户切换到不同的选项卡。
  2. 用户切换到不同的应用程序。
  3. 浏览器窗口最小化。
  4. 浏览器窗口可见但不是焦点窗口。
  5. 浏览器窗口位于另一个窗口的后面。
  6. 窗口所在的空间不是当前空间。

拓展一下定时器的原理:

在JavaScript中,定时器的执行是通过浏览器的事件循环(Event Loop)机制来实现的,而不是通过单独的线程来执行的。当定时器达到指定的时间间隔时,浏览器会将回调函数放入任务队列中等待执行。当当前执行的任务执行完成后,Event Loop会从任务队列中取出下一个任务并执行。因此,定时器的执行与主线程是在同一线程上完成的,并不会像其他语言中的定时器一样在单独的线程中执行。在有些浏览器里,定时器可能是在单独的线程执行的。

怎么解决呢?

webworker 很好的解决了这个问题,首先javascript是单线程 ,我们可以在主线程开启一个worker线程执行任务而不干扰用户界面(主线程),除此之外,当主线程遇到大量计算或者复杂的业务逻辑时,会对我们的页面造成不好的用户体验,我们也可以用webworker

在客服系统除了利用定时器发送心跳包这个场景之外,还有以下这几个场景用到:

  1. 用户10分钟没有发消息,系统要自动结束会话
  2. 用户30分钟界面无操作,断连websocket
    相关参考链接:
  3. https://blog.csdn.net/lemaktub/article/details/113989612?spm=1001.2014.3001.5506
  4. https://www.jianshu.com/p/beadd2a12df5
相关推荐
陆枫Larry3 分钟前
小程序 scroll-view 设置 padding 右侧不生效?用一层包裹解决
前端
晴殇i18 分钟前
CommonJS 与 ES6 模块引入的区别详解
前端·javascript·面试
Selicens19 分钟前
git批量删除本地多余分支
前端·git·后端
wuhen_n24 分钟前
KeepAlive:组件缓存实现深度解析
前端·javascript·vue.js
前端付豪25 分钟前
Nest 项目小实践之图书展示和搜索
前端·node.js·nestjs
wuhen_n26 分钟前
Vue Router与响应式系统的集成
前端·javascript·vue.js
FansUnion1 小时前
用 AI 自动生成壁纸标题、描述和 SEO Slug
javascript
青青家的小灰灰1 小时前
金三银四面试官最想听的 React 答案:虚拟 DOM、Hooks 陷阱与大型列表优化
前端·react.js·面试
HelloReader1 小时前
深入理解 Tauri 架构与应用体积优化实战指南
前端
lemon_yyds1 小时前
vue 2 升级vue3 : ref 和 v-model 命名为同名
前端·vue.js