用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
相关推荐
明仔的阳光午后24 分钟前
React 入门 02:从单页面应用到多页面应用
前端·react.js·前端框架
.生产的驴26 分钟前
React 页面路由ReactRouter 路由跳转 参数传递 路由配置 嵌套路由
前端·javascript·react.js·前端框架·json·ecmascript·html5
非凡ghost27 分钟前
批量转双层PDF(可识别各种语言) 中文绿色版
前端·windows·pdf·计算机外设·软件需求
苏卫苏卫苏卫29 分钟前
【码源】智能无人仓库管理系统(详细码源下~基于React+TypeScript+Vite):
前端·react.js·typescript·vite·项目设计·智能无人仓库管理系统·码源
打小就很皮...29 分钟前
PDF 下载弹窗 content 区域可行性方案
前端·javascript·pdf
Felicity_Gao3 小时前
uni-app VOD 与 COS 选型、开发笔记
前端·笔记·uni-app
我狸才不是赔钱货5 小时前
前端技术栈全景图:从HTML到现代框架的演进之路
前端·html
百花~5 小时前
前端三剑客之一 HTML~
前端·html
lang201509286 小时前
Spring远程调用与Web服务全解析
java·前端·spring
孤狼warrior7 小时前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫