N개의 탭, 단 하나의 웹소켓: SharedWorker

아래의 영상을 보고 정리한 글입니다.

https://www.youtube.com/watch?v=SVt1-Opp3Wo

 

---

 

개요

뱅크 서비스에서는 실시간 푸시 기능이 중요함

 - 실시간 차트

 - 거래 채결 시

 

모바일에서만 서비스를 제공 할때는 유저 한명 당 하나의 웹소켓 커넥션이 필요했으나, PC 까지 서비스를 확장함에 따라 하나의 유저가 N개의 웹소켓 커넥션을 유지하는 상황이 발생됨. 아무래도 PC 이다 보니가 여러 탭을 띄워서 보는 사용성이 있다보니..

 - 모바일 -> 유저 1명 1개의 커넥션

 - PC -> 유저 1명 N개의 커넥션

 

물론 서버에서 인프라를 늘려 웹소켓 커넥션을 더 할당할 수 있도록 처리해도 되지만 FE에서도 최소화 하는 방법을 모색하게 됨.

 

해결 방안

PWA 일부 기능 중 하나인 SharedWorker 사용

 

SharedWorker 사용 조건

 - 같은 origin

 - 같은 worker 파일

 

SharedWorker를 이용한 코드 흐름

 - 탭에서 worker로 메시지 보낼 때

 - worker에서 탭으로 메시지 보낼 때

 

탭에서 worker로 메시지 보낼 때 

메인스레드와 메시지 채널로 연결되어 있는 메시지 포트 객체를 portList에 저장한다.

탭에서 worker로 메시지 보낼 때 준비과정 (출처: 토스 slash 24)

탭에서 worker로 메시지 전송 (출처: 토스 slash 24)

 

worker에서 탭으로 메시지 보낼 때

 

예외상황

SharedWorker를 사용하지 못하는 브라우저에서는 DedicatedWorker를 사용한다.

코드를 두벌로 관리하지 않게 위해

 

SharedWorker 사용 시 문제

 - 메모리 누수

 - 번들링

 

메모리 누수 해결 방법

탭이 닫혔을 때 portList에 저장된 객체와 event handler를 지워줘야 하는데...

shared worker에서는 탭이 닫혔을 때 이벤트를 받을 수 있는 API를 제공해주지 않는 상황이다.

 

MessagePort로 연결된 두 쓰레드 중 하나가 나가리 되면, 더이상 사용하지 않는 걸로 간주된다.

즉, 탭이 닫히면 MessagePort가  가비지 컬렉션 된다.

 

하지만, postList에 messagePort를 객체를 저장하고 있어서 가비지컬렉션이 안되는 상황이다.

그래서, postList에 저장 할때 WeakRef로 한번 감싸서 저장한다.

getRef를 통해 얻은 값이 undefined 이면 가비지컬렉션으로 인하여 회수되었다고 볼 수 있음.

그래서 타이머로 주기적으로 어떤탭이 닫혔는지 확인해준다면 효과적으로 메모리 누수문제 해결 가능

 

 

번들링 해결 방법

SharedWorker를 사용하려면 worker.js를 읽어들이기 위해 정확한 위치를 지정해야 하는데, worker.js가 번들러에 의해 임의로 파일명이 변경되어 worker.js 파일을 읽을 수 없는 상황이 발생했다.

 

URL 인스턴트로 넣어주면 webpack이 적절하게 변경해준다.