Workers에 대해 postMessage를 수동으로 작성하는 것을 중단하세요 — 이를 위한 Decorator를 만들었습니다

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 소개

이 라이브러리는 모든 보일러플레이트 코드를 제거합니다.

백그라운드 로직 정의 (워커 스레드에서 실행)

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에서 훅으로 사용

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

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

postMessage도, onmessage도 없습니다. 요청‑ID 추적도 없습니다. 데코레이터와 훅만 있으면 됩니다.

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의 고통을 겪어본 분들의 의견을 기다립니다.