Web Worker API 톺아보기

Web Worker 란?

// 바닐라 환경
const myWorker = new Worker("worker.js");

// 번들러 환경
const myWorker = new Worker(new URL('worker.js', import.meta.url));

웹 워커와 통신하기

// 메인 스레드
myWorker.postMessage("Hello, World!");

// 워커
onmessage = e => console.debug(`Message from main thread: ${e.data}`);

웹 워커 종료하기

// 메인 스레드
myWorker.terminate();

웹 워커의 종류

1. 전용 워커(Dedicated workers)

2. 공유 워커(Shared workers)

3. 서비스 워커(Service Workers)

전용 워커

// calculate.js
function add(a, b) {
  return a + b;
}

console.debug(`3 + 4 is ${add(3, 4)}`);

// 메인 스레드
const myWorker = new Worker('calculate.js');

// worker.js
importScripts("calculate.js");

// 메인 스레드
const myWorker = new Worker('worker.js');

공유 워커

// 메인 스레드
const myWorker = new SharedWorker('worker.js');
myWorker.port.onmessage = e => console.log(`Message received from worker: ${e.data}`);
myWorker.port.start();

<input type="text" onChange={e => myWorker.port.postMessage(e.target.value)} />

// worker.js
onconnect = e => {
  const port = e.ports[0];

  port.addEventListener('message', e => {
    const workerResult = `Result: ${e.data}`;
    port.postMessage(workerResult);
  });

	// addEventListener 를 사용하기 위해서는 다음 코드가 필수입니다.
	// 아니라면, onmessage 메소드에서 암시적으로 호출합니다.
  port.start();
};

서비스 워커

스레드 안정성에 대해

웹 워커에서 사용가능한 함수 및 인터페이스들

• Navigator

• fetch API

• Array, Date, Math, String

• setTimeout, setInterval

• 등등

개인적인 감상

// 메인 스레드에서 즉시실행 함수 표현식을 문자열로 보냅니다.
myWorker.postMessage(`(() => 'im stringfied function!')()`);

// 웹 워커에서 해당 문자열을 받아 eval 로 실행합니다.
onmessage = e => {
  const workerResult = `Result: ${eval(e.data)}`;
};

참고