用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
相关推荐
Wect13 分钟前
LeetCode 39. 组合总和:DFS回溯解法详解
前端·算法·typescript
Wect16 分钟前
LeetCode 46. 全排列:深度解析+代码拆解
前端·算法·typescript
IT_陈寒17 分钟前
Vite 凭什么比 Webpack 快50%?揭秘闪电构建背后的黑科技
前端·人工智能·后端
颜酱18 分钟前
Dijkstra 算法:从 BFS 到带权最短路径
javascript·后端·算法
hi大雄1 小时前
我的 2025 —— 名为《开始的勇气》🌱
前端·年终总结
从文处安1 小时前
「前端何去何从」一直写 Vue ,为何要在 AI 时代去学 React?
前端·react.js
aircrushin1 小时前
OpenClaw“养龙虾”现象的社会技术学分析
前端·后端
明君879971 小时前
#Flutter 的官方Skills技能库
前端·flutter
yuki_uix2 小时前
重新认识 React Hooks:从会用到理解设计
前端·react.js
林太白2 小时前
ref和reactive对比终于学会了
前端