[JS] Web Worker

Web Worker

- 웹 애플리케이션이 메인 스레드와 별도로 스크립트를 백그라운드에서 실행할 수 있게 하는 작업이다.

 

ex) 모니터링 실시간 데이터 처리

➡️ 1초마다 메인 스레드에서 실시간 데이터를 처리한다면 데이터가 많아질수록 앱은 느려지고 UI는 지연된다.

---

😼Main Thread
- 브라우저가 기본적으로 실행하는 UI 스레드
- Web Worker를 생성하고 통신을 주도

🐭Worker Thread
- 메인 스레드가 생성한 백그라운드 스레드
- 독립된 환경에서 작업하며, 메인 스레드와 메시지 교환으로 통신

 

1. Web Worker 생성

- 설정된 시간(1초)마다 refresh token을 Main Thread로 보내는 Web Worker이다.

- selft를 사용하는 이유는 Worker 객체 스스로에게 들어오는 message를 Listen할 수 있게 만들 수 있다.

const intervalWorker = new Worker(
  URL.createObjectURL(
    new Blob(
      [
          `self.onmessage = (evt) => { 
          	const { refreshToken } = evt.data;
						 	
            setInterval(() => { 
                postMessage({ refreshToken });
            }, motionDetectTime);
            
          };`
      ],
      {
          type: `application/javascript`
      }
    )
  )
);

 

2.  Main Thead에서 Worker Thread로 데이터 전달

- postMessge를 통해 Worker Thread에 데이터를 전달한다.

• motionDetectTime: 주기적 작업의 간격(ms)
• refreshToken: 사용자 인증 토큰

intervalWorker.postMessage({ 
	motionDetectTime: 1000,
	refreshToken: localStorage.getItem(`refreshToken`)
});

 

3.Worker Thread에서 메세지 처리

1. refresh token 없을 경우: 워커 종료 & 로그아웃
2. 모션이 감지되는 경우: refresh token 변경되었을 경우 워커 종료
3. 모션이 감지되지 않는 경우: 워커 종료

intervalWorker.onmessage = evt => {
	const refreshToken = localStorage.getItem(`refreshToken`);

    if (!refreshToken || !checkMotionFunc()) {
        intervalWorker.terminate();
        if(!refreshToken) logout();
    } else {
        if (evt.data.refreshToken !== refreshToken) {
            intervalWorker.terminate();
        }
    }
};

const autoLogoutTime = 1200000;

const checkMotionFunc = () => {
    const motionTime: number = Number(localStorage.getItem(`motionTime`));

    if (null === motionTime || autoLogoutTime < Date.now() - motionTime) {
        sessionStorage.setItem(`noMotion`, String(true));

        logout();

        return false;
    } else {
        return true;
    }
};

const checkMotionEventFunc = () => {
    if (!checkMotionFunc()) return;
    localStorage.setItem(`motionTime`, String(Date.now()));
};