当我们需要对 CPU、内存等计算密集型任务进行处理时，往往需要开启一个单独的线程或进程。在前端开发中，这种情况也会出现。传统的解决方式是使用 Web Workers，但是 Web Workers 的 API 有些繁琐，而且在某些情况下也不太方便使用。因此，一些开发者倾向于使用 worker-server 这个 npm 包提供的解决方案。本文将详细介绍如何使用这个 npm 包。
安装
安装 worker-server 可以使用 npm 或 yarn。这里以 npm 为例。
--- ------- -------------
基本使用
worker-server 的使用相对来说比较简单。我们可以先准备好一个 JavaScript 模块，并在这个模块中提供需要进行计算的函数。
例如，我们可以创建一个叫做 calc.js 的文件，其中包含以下代码：
-------- ------ -- - ------ - - -- - -------- ------ -- - ------ - - -- -
然后，我们在另一个 JavaScript 文件中，创建一个 worker-server 实例，通过这个实例将 calc.js 中的函数暴露给客户端。
----- ------------ - -------------------------
----- ---- - ----------------
----- ------------ - --- --------------
----------- -
------------- -------------------- ----------
-
---
--------------------- ----- ---- ---这里，我们创建了一个名为 workerServer 的 worker-server 实例，并设置其监听端口为 3001。我们还在这个实例的配置中指定了 calc.js 的路径，以便 worker-server 可以在客户端调用这个模块。
在上述代码中，我们还使用了 Node.js 的 path 模块，来规范化 calc.js 文件的路径。这是一个好的使用习惯，可以避免一些常见的路径问题。
至此，我们的 worker-server 就已经启动了。这时，我们可以在客户端的 JavaScript 代码中使用 fetch API 来访问这个服务。
--------------------------------------- - ------- ------- -------- - --------------- ------------------ -- ----- ---------------- -- -- -- - -- -- --------- -- ----------- ------------ -- ---------------------
这里，我们使用了 fetch API，向 http://localhost:3001/calc/add 这个地址发送了一个 POST 请求，并提交了两个参数 a 和 b。当然，在服务端，我们也需要为这个请求提供相应的处理器。在这个示例中，我们只是针对 add 函数提供了一个处理器。假设我们想在服务端实现 sub 函数，我们只需要添加一个处理器即可。例如：
------------------------------ -- -- - -- -- - ----- ---------- - ---------------- ------ ----------------- --- ---
这里，我们通过 workerServer.addHandler 方法，添加了一个名为 sub 的处理器，用于处理客户端请求中的参数，并调用 calc.js 中的 sub 函数来计算结果。
高级用法
上述示例只介绍了 worker-server 的最基本用法。worker-server 还提供了一些高级用法，可以帮助我们更好地控制数据的发送和接收。
整合 Express
如果我们想在 Express 应用程序中使用 worker-server，可以这样做：
----- ------------ - -------------------------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----- ------------ - --- --------------
----------- -
------------- -------------------- ----------
--
----------- - --- - -- ----
---
---------------------
-----------------我们在 worker-server 的构造函数中，增加了一个 serverData 选项，用于指定 Express 实例。这个选项会将 Express 实例的引用，传递给 worker-server，使得 worker-server 可以直接启动这个 Express 实例，并监听其端口。这样，我们无需手动调用 app.listen 方法了。
注意，由于 worker-server 会修改 express 对象的原型，因此在整合时，需要先手动引入 express。
使用 Object Streams
worker-server 支持使用 Object Stream 来传输数据。Object Stream 的好处是，它允许我们将数据分成多个块发送，而不必一次性将全部数据读取完毕。这对于传输大量数据时，会带来很大的性能优化。
下面是一个使用 Object Stream 的示例：
----- ------------ - -------------------------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----- ------------ - --- --------------
----------- -
------------- -------------------- ----------
--
----------- - --- -
---
------------------------------------ -- -- - -- -- -
----- ---------- - ----------------
----- --- - ----------------- ---
----- ------ - ------------------------------------
----- ---- - - --- --
-------------------
------------- -- -
-------------
-- ------
------ ----------------
---
---------------------
-----------------这里，我们新增了一个名为 streamAdd 的处理器。与前面的示例不同，这个处理器返回的是一个可读流（Readable Stream），而不是一个 Promise。这个流会发送两个数据块，其中第一个数据块包含 sum 的值，第二个数据块则在 1 秒后发送结束信号。
在客户端的 JavaScript 代码中，我们也需要使用 Object Stream 的 API 来接收这些数据。例如：
----- ------ - ----- --------------------------------------------- - ------- ------- -------- - --------------- ------------------ -- ----- ---------------- -- -- -- - --- --- ----- ------ - ------------------- --- --- - -- ----- ------ - ----- - ----- ----- - - ----- -------------- -- ------ ------ --- -- ---------- - -----------------
这里的 JavaScript 代码使用了 fetch API，调用了名为 streamAdd 的处理器，并使用 Object Stream API 接收了返回的数据。注意，在客户端代码中，我们不能直接使用 response.json() 方法，而是需要手动处理返回的块。这个示例代码使用了一个 while 循环，不断接收块，直到接收完毕。
总结
在本文中，我们介绍了 npm 包 worker-server 的基本使用方法，以及一些高级用法。通过使用 worker-server，我们可以更方便、高效地处理计算密集型任务。希望读者在实际开发中，能够运用这些技术，提高自己的开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671178dd3466f61ffe6ab