vue:sharedWorker共享工作者线程的使用

一.使用场景

某项目某接口，请求返回的数据量较大，消耗服务器资源严重。如果在web端打开多个页签，同时请求该接口，会造成服务端负荷过重。这时，共享工作者线程(SharedWorker)就派上了用场。根据SharedWorker的特性，第一个页面打开线程，就会创建一个SharedWorker，第二个页面也打开，就会使用已经创建的同一个线程。如此，只要在线程中将数据进行一定的缓存处理，多个页签打开时，就可以共用这一份数据。

二.SharedWorker的一些特性

首先，SharedWorker的机制在不同浏览器的实现方式可能是不一样的，所以多页面共享线程只限于同一浏览器，而不能跨浏览器。chrome打开的页面只能与chrome页面共享，而不能与火狐浏览器共享。

如果使用火狐浏览器，可以直接在控制台查看ShareWorker中打印的信息。但如果是Chrome浏览器或者sougou浏览器，ShareWorker文件中打印的信息在主线程页面是无法查看的。Chrome浏览器查看SharedWorker的方式是在浏览器地址栏访问 Chrome://inspect => SharedWorker=>inspect， sougou的查看方式请自行搜索。

关于SharedWorker的浏览器兼容性，可查询MDN相关文档。https://developer.mozilla.org/zh-CN/docs/Web/API/SharedWorker

三.SharedWorker的引入与一般使用

如果在传统的js页面，可以通过new SharedWorker(src)创建线程

var myWorker = new SharedWorker("worker.js");

如果用vite + vue3技术栈，需要这样引入

import sharedWorker from './worker?sharedworker';

在vite的开发模式下，它实际生成的是这样一个文件。其中type类型为module，则允许在开发的使用import ，export的es6模块语法。但在生产构建后，worker文件会按照引入链会被构建成一个文件。

export default function WorkerWrapper() { return new Worker("/apps/home/worker.ts?worker_file", { "type": "module" }) }

需要注意的是，worker内部并没有window对象，因此如果你所引入的包（例如axios登）中包含window的引用，构建后在运行时大概率会报错。我通过在worker文件开头增加了两行代码修复了这个问题。所以能够这样做，是因为self是window的一个子集，它具备了大部分window的对象。

self.window = self;
window = self;

以下是常用方法

worker.js

// 与专用工作者线程不同，共享线程通过port来使用，port是一个MessagePort对象，包含了onmessage,postMessage等方法。
// 连接后通过port操作
self.onconnect = ({ ports }) => {
  ports.forEach((port) => {
    port.onmessage = (ev) => {
        const someData = {}
        port.postMessage(someData);
    };
    port.onmessageerror = (ev) => {
      console.log('error', ev);
    };
  });
};

四.进一步对调用方法进行封装

由于SharedWorker是用postMessage发送消息，用onmessage接受消息，在使用是不如调用一个方法那么直接方便。可以考虑将其封装成返回Promise方法。

import sharedWorker from './worker?sharedworker';
import { useUserStore } from '/@/store/modules/user';
export function useWorker() {
  const userStore = useUserStore();
  const worker = new sharedWorker();
  const onMessageResolveMap = {};
  const onMessageRejectMap = {};
  worker.port.onmessage = ({ data }) => {
    if (typeof onMessageResolveMap[data.funcName] === 'function') {
      if (data.data.statusCode === 200) {
        onMessageResolveMap[data.funcName](data.data?.data);
      } else {
        onMessageRejectMap[data.funcName](data.data.descript);
      }
    }
  };
  function getWorkerData(funcName, params, cacheTime = 2 * 60 * 1000) {
    return new Promise((resolve, reject) => {
      onMessageResolveMap[funcName] = resolve;
      onMessageRejectMap[funcName] = reject;
      worker.port.postMessage({ token: userStore.getToken, funcName, params, cacheTime });
    });
  }
  function stopWorker() {
    if (worker?.port) {
      worker?.port?.close();
    }
  }
  return {
    getWorkerData,
    stopWorker,
  };
}

如上getWorkerData方法，当方法调用时，返回一个promise对象，但promise对象不会马上变为resolve状态，而是将promise的resolve和reject 先保存起来，在onmessage中在通过方法名返回响应的数据。当然，这个方法有一个潜在的问题，如果只用方法名做区分，当调用一个方法还没返回数据接着又调一次，resolve就会被覆盖掉，它只能等返回数据再进行下一次调用。解决的办法也很简单，只要在传递的参数中增加一个随机数作为识别即可。

下面是在worker中的处理

import * as api from './api/api';
import { handleApi } from './api/utils';
self.window = self;
window = self;
const cacheApi = handleApi(api);
self.onconnect = ({ ports }) => {
  ports.forEach((port) => {
    port.onmessage = (ev) => {
      const { token, funcName, params, cacheTime } = ev.data;
      cacheApi[funcName](token, params, cacheTime).then((res) => {
        if (res?.data) {
          port.postMessage({ funcName, data: res.data });
        }
      });
    };
    port.onmessageerror = (ev) => {
      console.log('error', ev);
    };
  });
};

cacheApi是一个包含需要调用的所有接口方法的对象，通过主线程传来的函数名funcName调用相关接口。获得数据后通过postMessage将数据返回给主线程。

如果想对接口数据根据cacheTime设置的时间进行缓存，需要怎么处理呢？这里我用到了闭包的结构。api这变量包含了api文件中定义的所有接口。通过handleApi这个函数进行处理，返回一系列内部包含了缓存变量的闭包方法。

export function handleApi(apis) {
  const apiMap = {};
  for (const name in apis) {
    const originFunc = apis[name];
    const func = (() => {
      const pendings: any = {};
      // 根据不同的条件保存结果
      const results: any = {};
      const timeStamps: any = {};
      function waitResult(resolve, resultKey) {
        if (!results[resultKey]) {
          setTimeout(() => {
            waitResult(resolve, resultKey);
          }, 300);
        } else {
          resolve(results[resultKey]);
        }
      }
      function cacheValid(ret, resultKey, cacheTime) {
        const _timeStamp = new Date().getTime();
        // 检查是否过了缓存时间
        if (_timeStamp - timeStamps[resultKey] > cacheTime || !ret) {
          return false;
        } else {
          return true;
        }
      }
      return (token, params, cacheTime) => {
        const resultKey = JSON.stringify(params);
        // 正在请求数据，等待
        if (pendings[resultKey]) {
          return new Promise((resolve) => {
            waitResult(resolve, resultKey);
          });
         // 缓存是否还生效
        } else if (cacheValid(results[resultKey], resultKey, cacheTime)) {
          return new Promise((resolve) => {
            resolve(results[resultKey]);
          });
        } else {
          // 开始一个新的请求
          pendings[resultKey] = true;
          return new Promise((resolve) => {
            originFunc(params, {
              headers: {
                Authorization: token,
              },
            }).then((res) => {
              if (res?.data?.statusCode === 200) {
                timeStamps[resultKey] = new Date().getTime();
                results[resultKey] = res;
              }
              pendings[resultKey] = false;
              resolve(results[resultKey]);
            });
          });
        }
      };
    })();
    apiMap[name] = func;
  }
  return apiMap;
}

这里面有几个关键点：

如果有两个页面在同时请求一个接口，并且条件都一样，后请求的不应当再请求一次，而应当等待缓存数据的到来。

因此，当第一个页面在开始请求接口之前，就设置pending 为true, 这样第二个页面进入方法后，得知缓存中无数据并且接口在请求，会不断调用自身得waitResult方法进行等待。

当接口返回数据后，pending为false, 等待结束，返回缓存的数据。

过期时间的处理：cacheTime通过方法参数传入，因此不同的方法在调用时可以设置不同的过期时间。当接口返回数据后，将当前时间戳记录在timeStamps中，下次调同一个接口，则通过cacheValid方法检查是否超过这个时间。为了保证数据优先，如果上一次没缓存到正确的数据，也应当作为过期情况重新调用。