회사에서 런칭한 키오스크 어플리케이션을 사용하는 도중에 서버 에러가 나거나 네트워크 문제가 있을 경우 자동으로 재기동될 수 있도록 하기 위해 웹소켓과 SSE에 대해 공부하게 되었다.

🚀 웹 소켓

• 양방향 통신
• IE 10부터 지원하고 전세계 유저의 98.16%가 네이티브하게 사용 가능
• 최대 동시 접속 수는 서버 셋업에 따라 다름
• 배터리 및 데이터 사용량이 더 큼
  • 서버랑 계속 handshake를 하기 때문
• 서버와 연결이 끊겼을 때 자동으로 연결해주는 기능이 없음 (추가 소스코드 필요)
• ex) 카카오톡 채팅, 주식 트레이딩 (리얼타임이 필요할 때)
  

📢 SSE

• 단방향 통신
  • 서버 → 클라이언트
• IE는 지원을 안 하고 전 세계 유저의 97%가 사용 가능
• 최대 동시 접속 수
  • HTTP 라면 브라우저당 6개 제한
    • 탭을 6개 이상 열었을 때 작동이 안 될 수 있음
  • HTTP2 는 기본 100개 허용
• 배터리 및 데이터 사용량이 작음
  • 한번 열어두고 계속 기다리기 때문
• buffer만 꺼주면 소켓이랑 같이 실시간 업데이터가 가능
• 서버와 연결이 끊겼는지 3초마다 한번씩 확인해서 자동으로 연결
• 방화벽(firewall)이 있는 경우에도 큰 문제없이 가능
• ex) 알림을 줄 때

SSE 사용하기

서버 설정

1. 헤더 전송하기

• 'Content-Type': 'text/event-stream'
  • text 형태의 이벤트 스트림을 보낼거야
• 'Connection': 'keep-alive'
  • 커넥션을 닫지 말고 계속 열어두고 기다리고 있어라
• 'Cache-Control': 'no-cache'
  • 계속 새로운 데이터가 올 것이기 때문에 캐시는 필요 없어

2. 서버에서 이벤트가 발생 했을 때 데이터 클라이언트로 보내기

• 데이터를 보낼 때 맨 끝에 \n\n 을 써줘야 함
• \n\n : 이벤트 스트림의 끝

3. 버퍼 없애기

• 버퍼가 있으면 클라이언트에게 바로 안 보내고 잠시 기다림
  • HTTP header
  • ngnix config

클라이언트

EventSource로 연결하기

예시

useEffect(() => {
  const sseEvents = new EventSource('http://localhost:3000/sse');
  
  sseEvents.onmessage = function(stream) {
    // 메세지 받았을 경우
    const parsedData = JSON.parse(stream.data);
  };

  sseEvents.onopen = function() {
    // 연결됐을 경우
  };
  
  sseEvents.onerror = function(error) {
    // 에러 발생
  };
}, [])

Reference

• 웹소켓과 Server-Sent-Event 차이점 알아보고 사용해보기
• [tosstech] 똑똑하게 브라우저 Polyfill 관리하기