用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
相关推荐
颜酱15 分钟前
理解二叉树最近公共祖先(LCA):从基础到变种解析
javascript·后端·算法
Sailing15 分钟前
🚀 别再乱写 16px 了!CSS 单位体系已经进入“计算时代”,真正的响应式布局
前端·css·面试
FansUnion29 分钟前
我如何用 Next.js + Supabase + Cloudflare R2 搭建壁纸销售平台——月成本接近 $0
javascript
喝水的长颈鹿31 分钟前
【大白话前端 03】Web 标准与最佳实践
前端
爱泡脚的鸡腿32 分钟前
Node.js 拓展
前端·后端
左夕2 小时前
分不清apply,bind,call?看这篇文章就够了
前端·javascript
Zha0Zhun2 小时前
一个使用ViewBinding封装的Dialog
前端
兆子龙2 小时前
从微信小程序 data-id 到 React 列表性能优化:少用闭包,多用 data-*
前端
滕青山2 小时前
文本行过滤/筛选 在线工具核心JS实现
前端·javascript·vue.js
时光不负努力2 小时前
编程常用模式集合
前端·javascript·typescript