用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