서버-클라이언트 이벤트: 실시간 애플리케이션에 적합한 간단한 솔루션
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 웹 개발자, 실시간 애플리케이션 개발에 관심 있는 중급 이상 개발자
- 난이도: 중간 (HTTP 기반 통신 방식 이해 필요)
핵심 요약
- Server-Sent Events (SSE)는 서버에서 클라이언트로 단일 방향 통신을 지원하며, WebSockets보다 간단한 구현이 가능하다.
- SSE는 표준 HTTP 프로토콜을 사용하여 기존 인프라와 호환성이 높고, 단일 연결 유지로 대역폭 효율성을 높인다.
- Node.js + Express에서 SSE를 구현할 때,
res.setHeader를 통해text/event-stream형식을 설정하고,EventSource를 사용하여 클라이언트에서 이벤트를 수신한다.
섹션별 세부 요약
1. 서버-클라이언트 통신 기법 비교
- Short Polling: 클라이언트가 주기적으로 서버에 요청을 보내는 방식. 데이터가 없을 경우 불필요한 네트워크 트래픽 발생.
- Long Polling: 서버가 데이터가 있을 때까지 연결을 유지. 서버 리소스 사용량 증가 가능성.
- WebSockets: 양방향 통신 가능. 하지만 복잡한 애플리케이션에만 적합.
- SSE: 단일 방향 통신으로, HTTP 기반으로 간단한 구현 가능.
2. SSE 선택 이유
- 단순한 구현: WebSockets보다 설정 및 코드 복잡도가 낮음.
- 일방향 통신 필요성: 클라이언트가 데이터를 요청하고, 서버가 결과를 순차적으로 전송. 양방향 통신 필요 없음.
- 표준 HTTP 지원: 추가 프로토콜 또는 포트 필요 없음으로, 기존 인프라와 호환성 높음.
3. SSE 구현 예시
- *서버 측 (Node.js + Express)**
res.setHeader('Content-Type', 'text/event-stream')을 통해 SSE 헤더 설정.res.write('data: ...')로 이벤트 데이터 전송.- 사용자 별 처리 결과를 순차적으로 전송하며, 마지막 사용자 처리 완료 시
done: true이벤트 전송.
- *클라이언트 측**
EventSource를 사용하여/api/process-data엔드포인트에 연결.onmessage이벤트 핸들러로 전송된 데이터 파싱 및 UI 업데이트.- 진행률 표시 및 에러 처리 로직 포함.
4. SSE의 장점
- 대역폭 효율성: WebSockets와 달리 데이터가 있을 때만 전송.
- 디버깅 편리성: HTTP 기반으로 브라우저 개발자 도구 또는 Postman으로 테스트 가능.
- 확장성: 순차 처리 시 SSE가 WebSockets보다 복잡성 낮음.
- 진행률 업데이트: 사용자가 처리 결과를 즉시 확인 가능.
5. SSE의 한계
- 브라우저 연결 제한: 일반적으로 도메인당 6개의 동시 SSE 연결 제한.
- 일방향 통신만 지원: 클라이언트에서 서버로 데이터 전송이 필요할 경우 WebSockets 사용 필요.
- IE 지원 부족: polyfill 필요.
결론
- SSE는 서버-클라이언트 단일 방향 통신이 필요한 경우 WebSockets보다 간단하고 효율적인 선택.
- Node.js + Express에서
EventSource와text/event-stream을 활용하여 구현 가능. - IE 지원이 필요할 경우 polyfill 적용.
- 실시간 애플리케이션에서 서버의 진행 상태를 클라이언트에 실시간으로 전달하는 경우 SSE를 고려할 것.