[10분 테코톡] 다이앤의 http부터 웹소켓까지
- HTTP는 요청-응답 구조로 인해 슬랙, 피그마와 같은 실시간 서비스 구현에 비효율적이며, 매초 요청을 보내는 방식은 근본적인 한계가 있습니다. 🔄
- 웹소켓은 HTTP의 실시간성 한계를 극복하기 위해 등장했으며, 클라이언트와 서버가 한 번 연결을 맺으면 지속적으로 양방향 통신이 가능한 기술입니다. 🤝
- 웹소켓 연결은 클라이언트가 프로토콜 업그레이드를 요청하고 서버가 101 Switching Protocols 응답을 보내는 '핸드쉐이크' 과정을 통해 이루어집니다. 🫱🫲
- 웹소켓은 단순한 양방향 통신 채널만 제공하므로, 메시지 형식이나 사용 구조는 개발자가 직접 구현해야 하는 불편함이 있습니다. 🛠️
- STOMP는 웹소켓의 이러한 불편함을 해소하기 위해 고안된 메시징 프로토콜로, pub/sub(발행/구독) 구조를 기반으로 하여 웹소켓 사용을 용이하게 합니다. 📨
- pub/sub 구조에서 Subscriber는 특정 Topic을 구독하고, Publisher가 해당 Topic에 메시지를 보내면 자동으로 Subscriber에게 전달됩니다. 📣
- Stomp.js는 자바스크립트에서 STOMP 프로토콜을 쉽게 사용할 수 있도록 돕는 라이브러리로, 스프링 프레임워크와의 호환성이 좋습니다. 💻
- 웹소켓(STOMP) 사용법은 크게 연결(connect), 구독(subscribe), 메시지 전송(send), 응답 처리, 연결 해제(disconnect)의 다섯 단계로 구성됩니다. 🔗
client.activate()로 서버와 연결하고, client.subscribe()로 필요한 경로를 구독하며, client.publish()로 메시지를 전송합니다. 📤
- 구독 관리 전략으로는 전역 구독, 컴포넌트별 구독, 구독 관리자 구현 방식이 있으며, 각 방식은 장단점(예: 중복 구독, props drilling, 관심사 분리)을 가집니다. 🧠
- 실시간 기능 구현 시 모든 요청을 웹소켓으로 처리하기보다, 실시간성이 필수적인 부분은 웹소켓을, 변경 주기가 길거나 중요하지 않은 데이터는 REST API를 사용하는 하이브리드 접근 방식이 효율적입니다. ⚖️