用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
相关推荐
spmcor9 小时前
MinIO本地对象存储部署指南
前端
少年纪9 小时前
前端用 pdf.js 将 PDF 渲染到 Canvas 再转图片,文字消失的坑
前端
RoyLin9 小时前
TypeScript设计模式:复合模式
前端·后端·typescript
我是天龙_绍9 小时前
CSS/JS/图片全挂了,部署后页面白屏/资源加载失败?这两个配置项坑了多少人!
前端
我的小月月9 小时前
SQLFE:网页版数据库(VUE3+Node.js)
前端·后端
小高0079 小时前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
汤姆Tom9 小时前
Node.js 版本管理、NPM 命令、与 NVM 完全指南
前端·npm·node.js
东坡白菜9 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
Alan521599 小时前
Java 后端实现基于 JWT 的用户认证和权限校验(含代码讲解)
前端·后端
RoyLin9 小时前
TypeScript设计模式:策略模式
前端·后端·typescript