WebSocket과 HTTP, SSE

WebSocket과 HTTP,SSE 모두 응용계층에서 사용되는 프로토콜이다.

HTTP는 클라이언트-서버 간의 통신을 위한 단방향 통신이고 SSE는 서버에서 클라이언트 통신을 위한 일방향 통신다. 그리고 WebSocket는 양방향 통신이라는 차이점이 있다.

 

 

HTTP

HTTP는 클라이언트와 서버간에 데이터를 주고 받기 위한 프로토콜로, 웹 브라우저와 웹 서버간의 통신에 사용된다.

 

HTTP의 동작 원리

요청

• 클라이언트가 웹 서버에게 특정자원(웹 페이지, 이미지, 동영상)등을 요청하는 HTTP 요청 메시지를 생성합니다.
• 요청 메시지에는 요청방식(메서드), 요청할 자원의 경로(URL), 헤더(부가적인 정보), 그리고 필요한 경우 요청 본문(body)에 데이터를 포함하여 보낼수 있습니다. 

서버 응답

• 웹 서버는 받은 요청에 대한 처리 결과를 나타내는 HTTP 응답 메시지를 생성합니다.
• 웹 메시지에는 상태 코드(200 OK, 404 Not Found, 500 Internal Server Error 등), 응답에 대한 헤더 정보, 요청에 대한 본문이 포함됩니다.
• 클라이언트는 받은 응답 메시지를 해석하여 웹 페이지를 렌더링하거나 필요한 데이터를 처리합니다.

연결 종료

• HTTP는 기본적으로 무상태 프로토콜입니다. 각 요청은 서로 독립적이며, 이전 요청과 상태를 기억하지 않습니다.
• 한번의 요청 - 응답 주기가 완려되면 연결이 종료됩니다.

HTTP는 주로 웹 브라우징과 웹 페이지 로딩, 폼 제출, API 호출 등과 같은 웹 기반 응용 프로그램에서 사용됩니다.

 

 

SSE

SSE는 서버에서 클라리언트로 단방향으로 데이터를 보내는 기술로, 웹 어플리케이션에서 실시간 업데이트를 구현하는데 사용된다. SSE는 일방향 통신만 지원하며 서버에서 클라이언트로 지속적인 데이터를 전송한다.

 

SEE 동작 원리

연결 설정

• 클라이언트는 서버에서 특정 엔드 포인트로 HTTP요청을 보낸다.
• 이 요청에는 특별한 'Accept: text/event-stream' 헤더가 포함되어 있어 서버가 SSE를 지원함을 나타낸다.

서버에서 이벤트 스트림 응답 생성

• 서버는 클라이언트의 SSE요청을 받으면 연결을 열여두고, 필요할 때마다 이벤트 스트림 응답을 생성한다.
• 이 응답은 'Content-Type: text/event-stream' 헤더가 포함되어 있고, 이후 전송될 이벤트들을 포함하는 데이터 블록을 가지고 있다.

이벤트 전송

• 서버는 이벤트 스트림 응답을 열어두고, 필요한 경우에 실시간 데이터를 이벤트 스트림에 보낸다.
• 각 이벤트는 'event :', 'data:', 'id:', 'retry:' 등의 필드를 포함할 수 있다. 
• 주로 'event'는 이벤트 종류, 'data' 이벤트 데이터를 나타낸다.

클라이언트에서 이벤트 수신

• 클라이언트는 서버에서 전송한 이벤트를 수신하고, JavaScript의 'EventSource' API를 사용하여 이벤트를 처리한다.
• 브라우저는 이벤트가 도착할 때마다 'onmessage' 이벤트 핸들러를 호출하고, 이벤트의 데이터를 처리하는 화면을 업데이트한다.

연결 유지 및 재시도

• SSE 연결은 서버와 지속적으로 유지된다. 연결이 끊어지면 브라우저는 자동으로 서버와 재연결을 시도한다.
• 서버는 'retry:' 필드를 사용하여 클라이언트와 재연결 간격을 지정할 수 있다.

SSE는 HTTP기반의 단순하고 가벼운 프로토콜로, 서버 푸시 기능을 필요로하는 실시간 업데이트를 구현하기에 매우 효과적이다. 이를 통해 실시간 정보 스트리밍, 알림, 실시간 주식 시세 업데이트 등과 같은 기능을 구현할 수 있다.

 

 

WebSocket

WebSocket는 양방향 통신을 위한 프로토콜로, 클라이언트와 서버간의 지속적인 연결을 제공하며 실시간 데이터를 양방향으로 교환할 수 있다. 

 

WebSocket의 동작 원리

핸드 쉐이크(Handshake)

• 클라이언트가 서버에서 WebSocket 연결을 요청하면, 클라이언트와 서버간에 핸드쉐이크 과정이 발생한다.
• 클라이언트는 특정 HTTP 요청을 서버에 보내고, 이 요청에는 Upgrade헤더와 Connection:Upgrade헤더가 포함되어 있다.
• 서버는 요청이 WebSocket 연결을 요청한다는 것을 인지하고 핸드쉐이크를 수락한다.

지속적인 연결

• 핸드 쉐이크가 완료되면, 클라이언트와 서버간에 지속적인 양방향 연결이 설정된다. 이 연결은 TCP 소켓을 기반으로 하며, HTTP연결과 달리 계속 유지된다.

데이터 교환

• 핸드쉐이크가 완료되면, 클라이언트와 서버간에 지속적인 양방향 연결이 설정된다. 
• 이 연결은 TCP 소켓을 기반으로하며, HTTP연결과 달리 계속 유지된다.

연결 종료

• 양쪽 모두 연결을 끊으려면 단순히 소켓을 닫는 것으로 충분하다.
• 만약 연결이 끊어지면 클라이언트나 서버는 필요한 경우 다시 핸드 쉐크를 통해 새로운 연결을 할 수 있다.

WebSocket은 실시간 채팅 애플리케이션, 온라인 게임, 주식 거래 플랫폼, 협업 도구등과 같은 다양한 프로그램에서 사용된다.