使用Web Worker线程处理 Websocket的心跳检测

一、什么是Web Worker

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。Web Worker 为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面; 它的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。

二、Websocket的心跳机制

心跳机制是每隔一段时间会向服务器发送一个数据包，告诉服务端自己还活着，同时客户端（浏览器）会确认服务器端是否还活着的一个检测机制；根据我这项目的实际需求，实时响应数据并根据数据改变DOM对应的状态，长时间不操作的话，ws会出现断连的情况，因此我们给 ws 的连接加入了心跳监测，保证数据通信的畅通；

三、web worker线程处理心跳检测

初始化建立websocket连接，websocket监听事件:

if (!this.socket) {
    this.socket = new WebSocket(this.wsUrl);
}

this.socket.onopen = (e) => { 
    console.log('Connection to server opened'); 
    // 连接成功执行的逻辑 ...
    
    // 清除 worker .
    this.heartbeat?.terminate();
}

this.socket.onerror = (err) => {
   // 连接失败的逻辑处理
};

//打开链接正常
this.socket.onclose = (event) => {
  // 设置重连的逻辑...
};

载入同页面的 Web Worker:

const codeBlock = `setInterval(function() {
                      postMessage(currentDate);
                    }, 1000);`;
          
const blob = new Blob([codeBlock], { type: "application/javascript" });
// 创建 web Worker 线程
this.heartbeat = new Worker(URL.createObjectURL(blob));

this.heartbeat.onmessage = (event) => {
    //  event.data 获取数据 ...
}

总结： web worker 虽然不是新技术了，但日常开发中很少使用，这次也算是第一次在项目中引入，也是自己的首次尝试，记录一下方便后续深入学习与扩展！

flag: 第一次发这种文章，筛筛检检不知道写啥，看文的时候很爽，自己写一下太难了，以后得多多锻炼 ~

参考文档：
阮一峰： Web Worker 使用教程