停止手动编写 postMessage 给 Workers —— 我为此构建了一个装饰器

Source: Dev.to

痛苦的 API

// Standard Worker code — just to call ONE function
const worker = new Worker('./my.worker.js');
const requestId = Math.random();

worker.postMessage({ id: requestId, command: 'processData', payload: data });

worker.onmessage = (event) => {
  if (event.data.id === requestId) {
    console.log(event.data.result);
  }
};

你需要请求 ID、响应匹配、手动路由、SharedWorker 的端口管理……每一次方法调用都要如此。

介绍 ngx‑worker‑bridge

该库消除了所有这些样板代码。

定义你的后台逻辑（在 worker 线程中运行）

import { setState } from 'ngx-worker-bridge';

export class DataModule {
  private count = 0;

  increment() {
    this.count++;
    setState('counter', this.count); // broadcasts to ALL tabs
  }

  async processData(payload: any) {
    // heavy work here — UI thread never blocks
    return expensiveOperation(payload);
  }
}

在 Angular 中像普通服务一样调用

import { Injectable } from '@angular/core';
import { RunInWorker, workerStore } from 'ngx-worker-bridge';

@Injectable({ providedIn: 'root' })
export class DataService {
  count$ = workerStore('counter', 'shared'); // reactive, auto‑updates

  @RunInWorker({ bridge: 'shared', namespace: 'data' })
  increment(): Promise { return null as any; }

  @RunInWorker({ namespace: 'data' })
  processData(payload: any): Promise { return null as any; }
}

或者在 React 中使用 Hook

import { useWorkerStore } from 'ngx-worker-bridge/react';

function App() {
  const count = useWorkerStore('counter', 'shared');
  return  service.increment()}>Count: {count};
}

没有 postMessage。没有 onmessage。没有请求 ID 跟踪。只需要一个装饰器和一个 Hook。

SharedWorker 功能

SharedWorker 只会启动一次，并在所有打开的浏览器标签页之间共享。 在模块内部调用 setState('counter', value) 会立即把新值广播给每个已连接的标签页。

打开 5 个标签页——它们都会保持同步，无需服务器或 WebSocket。

典型使用场景：

• 通知计数
• 实时股票/加密货币价格
• 共享计时器或会话
• 在所有标签页之间共享的单一 WebSocket 连接

安装

# Angular (RxJS already included)
npm i ngx-worker-bridge

# React
npm i ngx-worker-bridge rxjs

链接

• GitHub:
• npm:
• Demo:

欢迎提供反馈，尤其是曾经遭受 SharedWorker 痛苦的朋友们。