Как на Angular + RxJs использовать Web Worker?

Question

[Роман Ракзин]

Мне хотелось бы выполнять определённые действия в отдельном потоке (запросы на сервер и большие вычисления).
Как это лаконично сделать на Angular + RxJs подписок ?
Если есть функция doSomething(param1) и мне нужно запустить её в веб воркере и получить ответ, что б затем его отправить в сервис.
Как потом структурировать, если функций много и если они на подписках ?

Answer 1

[Lan_ser]

Не претендую на самый правильный подход.
Как это получилось у меня
В сервисе в нужном методе подключаешь web-worker

posts: string = 'https://jsonplaceholder.typicode.com/posts';
  submit() {
    if (typeof Worker !== 'undefined') {
      let input$: Observable<string> = of(this.posts);
      
     fromWorker<string, string>(
        () => new Worker(new URL(`./demo.worker`, import.meta.url)),
        input$
      ).subscribe((post) => {
        console.log(`Got from worker`, post);
      });
    } else {
      console.log('smth wrong');
      
    }
  }

Web-worker

import { DoWork, runWorker } from 'observable-webworker';
import { Observable } from 'rxjs';
import { delay, switchMap } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

export class HelloWorker implements DoWork<any, any> {
  public work(input$: Observable<any>): Observable<any> {
    return this.getPosts(input$)
  }

  getPosts(input$: Observable<any>){
    return input$.pipe(
      delay(1000),
      switchMap((i) => ajax.getJSON(i))
    );
  }


}

runWorker(HelloWorker);

Для каждой задачи я создаю новый web-worker. Но мне кажется есть возможность этого избежать.
Надеюсь это поможет