👷‍♀️ Shared Worker로 클라이언트의 소켓 통신 개선하기

자세한 문제 해결 과정은 블로그에서 확인 가능합니다.

개선 계기

기존 채팅의 소켓 통신의 경우, 채팅방 컴포넌트가 마운트될 때마다 새로운 connect가 이루어지고 언마운트 시 disconnect를 진행했습니다.

또한 ‘유저가 작성한 채팅 하이라이트’ 기능을 위해 통신 과정에서 userId를 주고받고 있었습니다. 이로 인해 아래와 같은 부분에서 개선이 필요해졌습니다.

• 성능적 측면 : 채팅방 컴포넌트가 마운트될 때마다 새로운 connect가 이루어지고 언마운트 시 disconnect를 진행 → 불필요한 소켓 리소스 낭비
• 보안적 측면 : ‘유저가 작성한 채팅 하이라이트’ 기능을 위해 통신 과정에서 userId를 주고받고 그대로 네트워크 탭에 노출됨 → userId 탈취 위험
• 사용자 경험 측면 : 여러 탭으로 채팅 시 동일한 닉네임이 아니라 각 탭마다 다른 닉네임이 부여됨 → 사용자 경험 저해

어떻게 개선해볼까?

[개선안 1] 전역 상태로 Socket 저장하기

[개선안 2] Shared Worker Thread에 Socket 저장

관련 자료

• 다중 탭에서 하나의 소켓을 공유할 수 있을까?

따라서 소켓 연결을 효율적으로 관리하기 위해 Shared Worker를 활용했습니다.

Shared Worker는 여러 브라우저 탭이나 스레드에서 동일한 Worker를 공유할 수 있으므로, 소켓 연결을 중앙에서 관리할 수 있는 구조로 개선할 수 있었습니다.