WebSocket의 연결 관리 방법에 대해서 다들 고민을 해보셨을텐데요
WebSocket 관리에 대해서 최근 토스에서 공개한 N개의 탭, 단 하나의 웹소켓 이라는 제목의 영상을 보고 글을 작성합니다.
WebSocket
WebSocket은 아시다시피 클라이언트와 서버 간에 실시간 양방향 통신을 가능하게 하는 프로토콜입니다.
HTTP 통신과 달리 연결이 한 번 성립되면 지속적으로 유지되어 서버나 클라이언트 모두 언제든지 데이터를 주고받을 수 있습니다.
위 그림과 같이 웹소켓은 한 탭 내의 코드에서 연결을 성립시킵니다.
하지만 탭이 여러개가 된다면?
그림처럼 아무런 설정없이 탭이 많아지면 여러개의 웹소켓이 생기게 됩니다.
웹소켓 연결 개수가 많아지면 서버의 리소스도 많아지기 때문에 연결 개수를 최소화 시키는 방법은 서비스 최적화로 이어질 수 있습니다.
서버측에서도 제어할 수 있지만, 해당 영상에서는 프론트엔드 측에서 연결 개수를 줄이는 방법에 대해서 설명했습니다.
활성화된 탭으로 관리
해당 방법을 사용할 경우, Focus 되지 않은 창에 대해서는 화면에 띄워져 있어도 데이터가 실시간으로 보여지지 않을 수 있는 상황이 만들어져 유저의 경험을 해칠 수 있습니다.
눈에 보이는 탭으로 관리
눈에 보이는 탭을 제외하고 WebSocket의 연결을 끊는 방법도 존재하지만,
여전히 여러개의 WebSocket이 생길 수 있다는 문제점을 가지고 있습니다.
Web Worker를 이용하자
위 그림처럼 WebSocket을 관리하면 우리가 원하는대로 최소한의 리소스를 사용해서 관리할 수 있을 것입니다.
그래서 영상에서 고안해낸 방법은 Web Worker API를 사용하는 것입니다.
Web Worker API는 Javascript 스레드와 별도로 브라우저 내에서 실행되는 스레드를 나타냅니다.
Shared Worker
Shared Wokrer는 동일한 오리진에 대해서 하나의 브라우저 스레드를 사용할 수 있게 만들어주는 웹 API 입니다.
위 그림과 같이, Shared Worker는 동일한 오리진을 사용하는 여러 개의 탭에서 동일한 worker.js 파일을 불러오는 new SharedWorker()에 대해서 같은 스레드를 공유할 수 있게 해주는 API 입니다.
SharedWorker의 스레드 공유 기준
- 같은 Origin 인가?
- 불러오는 Javascript 파일이 같은가?
Channel Messaging API
Channel Messaging API를 통해서 서로 다른 탭에서 메세지를 주고 받을 수 있기 때문에 다른 메세지 포트 객체끼리 통신할 수 있습니다.
Shared Worker
- onconnect 이벤트를 통해서 워커 스레드에게 해당 포트 저장합니다.
- 워커 스레드에 저장된 포트에게
postMessage로 메세지를 보내고
addEventListener를 통해서 포트에서는 해당 메세지를 수신할 수 있습니다.
- 워커 스레드에서는 전달받은 메세지를 바탕으로 연결되어 있는 모든 포트에게 해당 메세지를 전송합니다.
- 위와 같은 방법으로 여러 개의 탭에서 하나의 스레드를 사용해서 메세지를 공유할 수 있습니다.
Shared Worker + WebSocket
Shared Worker로 스레드를 공유해서 모든 탭에게 동일한 메세지를 보낼 수 있는 것처럼 여러 탭에서 공유할 웹소켓을 스레드에 올려서 모든 탭에서 하나의 웹소켓으로 실시간 메세지를 전달 받을 수 있습니다.
서버에 메세지 발신
서버에서 메세지 수신
