웹 서비스에 실시간 알림 미적용(SSE, WebSocket의 차이 및 단점)
📝 웹 서비스에 초대가 오면 실시간 알림 구현 계획
- 사이트 내비게이션바에 있는 초대 알림 아이콘에 알림이 있는 경우 뱃지로 표시됨
- 현재는 새로고침을 하거나 페이지가 리로드 되어야만 표시
- 실시간으로 알림을 구현하고 싶어서 계획 및 자료 조사 진행
- 생각보다 WebSocket으로 실시간 알림을 구현한 자료가 없었음
👉 SSE와 WebSocket의 차이
- SSE (Server-Sent Events)
- SSE는 서버에서 클라이언트로 단방향 실시간 데이터 스트리밍을 제공
- 이 기술은 서버가 새로운 데이터를 가지고 있을 때 클라이언트에게 이를 푸시하는 데 사용
- SSE는 HTTP 프로토콜을 기반으로 하며, 이는 웹소켓과는 달리 단방향 통신만 지원
- WebSocket
- WebSocket은 양방향 통신을 가능하게 하는 프로토콜
- 이는 서버와 클라이언트 간에 실시간 양방향 통신을 가능하게 함
WebSocket은 HTTP 프로토콜을 기반으로 초기 연결을 설정한 후, 그 이후의 데이터 전송은 WebSocket 프로토콜을 사용
📝 SSE로 구현하려다가 다른 사이트들을 확인해보니 대체로 실시간 알림 구현을 하지 않음
- 프로젝트에서 구현하려던 알림은 채팅방에 초대하면 초대 받은 사람이 알림을 받는 기능을 실시간으로 바꾸고 싶었음
- 단방향 통신이면 될 것 같아서 SSE를 적용하려고 계획을 바꿈
- 적용 전에 타 사이트들은 어떻게 구현했는지 테스트
- 유명한 사이트들의 댓글, 게시글 좋아요 알림도 실시간으로 구현되어 있지 않았음
- 적용하지 않은 이유가 있을 것 같아서 조사 진행
👉 실시간 통신 기술의 단점
- 서버 리소스
- 실시간 통신은 서버에 상당한 부하를 줄 수 있음
- WebSocket이나 SSE를 사용하면 클라이언트와 서버 간에 지속적인 연결이 유지되어야 함
- 동시에 많은 사용자를 처리하려면 서버 리소스가 많이 필요
- 복잡성
- 실시간 통신 기능을 구현하려면 추가적인 프로그래밍 복잡성이 따름
- 이는 개발 시간을 늘리고, 버그를 유발할 수 있음
- 보안 이슈
- 실시간 통신은 보안에 민감할 수 있음
- 지속적인 연결은 공격자에게 추가적인 공격 벡터를 제공할 수 있으므로, 보안을 철저히 고려해야 함
- 브라우저 호환성
- 모든 웹 브라우저가 실시간 통신 기술을 동일하게 지원하지 않음
- 이로 인해 추가적인 폴리필이나 라이브러리를 사용해야 할 수 있음
👉 카카오톡 같은 메신저의 실시간 알림에 대해
- 실시간 통신 기술을 사용하여 즉시 메세지를 전달
- 이러한 앱은 주로 WebSocket이나 비슷한 기술을 사용하여 서버와 클라이언트 간에 지속적인 연결을 유지하고, 새로운 메시지가 도착하면 즉시 사용자에게 알림을 전달
- 이러한 실시간 통신은 웹사이트와 앱에서 다르게 작동할 수 있음
- 웹사이트에서는 브라우저가 백그라운드에 있거나, 탭이 닫혀 있을 때 실시간 통신 연결이 끊어질 수 있음
- 반면에 앱에서는 백그라운드에서도 실시간 통신 연결을 유지할 수 있음
- 앱에서는 푸시 알림 서비스를 사용하여 실시간 알림을 전달할 수 있음
- 이는 앱이 백그라운드에 있거나, 장치가 잠겨 있을 때도 알림을 전달할 수 있게 함
- 이러한 서비스는 Apple의 APNS(Apple Push Notification Service)나 Google의 FCM(Firebase Cloud Messaging)과 같은 플랫폼별 푸시 알림 서비스를 사용