简介
@dxflow/comlinkjs 是一个 JavaScript 库，用于在 Web Worker 和主线程之间建立高效且简单的通信通道。它能够让你像调用本地函数一样调用远程函数，而不必显式地编写消息传递代码。
comlink.js 封装了所有 Web Worker 和主线程之间的事情。它提供了一个 Proxy，可以让你看起来像在调用本地函数一样调用任何传递的对象上的方法。通常，你的主线程代码将通过 Proxy 对象访问工作线程 API，但是由于它支持以下内容，因此它不限于 Web Workers：
- iframe
- ServiceWorkers
- SharedWorkers
- WebBinary
安装 @dxflow/comlinkjs
如果你使用 npm，请运行以下命令进行安装：
npm install @dxflow/comlinkjs
npm 会自动处理其工作。
使用 @dxflow/comlinkjs
在 Web Workers 中
在 Web Worker 中，你需要创建一个 worker.js，如下所示：
-- -------------------- ---- -------
------ - -- ------- ---- --------------------
----- -------- ------------- -
-- -------- ----- ---- --- --- ------
------ --------------
-- ---- ------ ------- -- ----
---
-
------------------------------ -- ---- ----- --- ------------- --------然后，你可以像这样在主线程中访问你的工作线程代码：
async function testWorker() {
const worker = new Worker('worker.js');
const remote = Comlink.wrap(worker);
const result = await remote.myMethodInWorker();
return result;
}此代码将在 worker.js 文件中运行名为 myMethodInWorker 的函数，并返回它的结果。
在主线程中
在主线程中，你需要通过以下方式将 Comlink 包装器应用到你的方法或对象：
import * as Comlink from '@dxflow/comlinkjs';
const myApi = {
myMethod() { return 42; },
};
const api = Comlink.wrap(myApi);您还可以将在远程位置定义的 API 包装在 Comlink.Proxy 对象中，这样您就可以在主线程中调用远程方法，如下所示：
-- -------------------- ---- -------
----- -------- ------------ -
----- --- - -------------
--- ----------------- ------- -- -
----- ------ - --- --------------------
---------------------------------- ------- -- -
-- ----------- --- -------- -
-------------------------------
-
---
---
--
----- ------ - ----- -----------------------
------ -------
-示例代码
以下是一个更完整的示例，此示例建立了两个 Web Workers，它们只是循环打印数字：
worker.js
-- -------------------- ---- -------
------ - -- ------- ---- --------------------
----- --------- -
----- ----- -
--- ---- - - -- - - -- ---- -
--------------------- ---
----- --- --------------- -- ------------------- -------
-
-
-
------------------ -------------main.js
-- -------------------- ---- -------
------ - -- ------- ---- --------------------
----- -------- ------------ -
----- ------ - --- --------------------
----- ------ - ---------------------
----- -------------
-
----- -------- --------------------- -
----- ---------- - --
----- ------- - ---
--- ---- - - -- - - ----------- ---- -
----- ------ - --- --------------------
----- ------ - ---------------------
---------------------
-
----- ------------------------------ -- ---------------
-
------------- -- ---- ---- ----- ------- -- - ------- -- -- -------
---------------------- -- ---- ---- ----- --- ---- -- ------- -- - ------- -- -- -------结论
@dxflow/comlinkjs 为开发人员提供了一种简单而有效的方法，可以在 Web Workers 和主线程之间建立通信通道，从而提高应用程序的效率。使用本文提供的教程，您可以轻松地开始使用 @dxflow/comlinkjs，并将其应用于您的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822d74