WebSocket과 Server Sent Event(SSE)

✒️ 2025-06-03 22:30 내용 수정

Node.js 교과서 개정 3판 내용 정리 추가

WebSocket

참고 자료 : mdn web docs Web socket, 위키백과 웹소켓

사용자의 브라우저와 서버 사이의 동시양방향 통신 채널을 만드는 프로토콜

• OSI 모델의 응용 계층(7계층)에 위치하며, 전송 계층(4계층)의 TCP에 의존한다.
• HTTP와 HTTPS 포트의 위에서 동작하도록 설계되어 있어 두 프로토콜과 호환이 된다.
• web socket을 사용하여 실시간으로 양방향 데이터 전송을 수행할 수 있다.
  • 양방향 통신 : 서버 <-> 클라이언트로 데이터를 서로 주고 받을 수 있다.
  • 단방향 통신 : 서버 -> 클라이언트 / 클라이언트 -> 서버만 가능하다.
• 또한 HTTP는 클라이언트로가 서버로 먼저 요청을 보내야 했으나, WebSocket을 사용하면 서버가 클라이언트에 먼저 메시지를 보내는 방식을 사용할 수 있다.
• 실시간 양방향 데이터 전송을 이용하여 채팅방 같은 기능 등을 구현할 수 있다.

WebSocket 이전의 이중방식

• web socket 이전에는 HTTP를 사용한 기술들 중 polling이라는 기술을 사용하여 데이터 전송을 구현했었다.
• HTML5부터 웹 브라우저와 웹 서버가 지속적으로 연결된 라인을 통해 실시간으로 데이터를 주고 받을 수 있게 되었다.
  • 처음 web socket에 연결되면 계속 연결된 상태를 유지하기에 업데이트할 내용이 생긴다면 서버에서 바로 클라이언트로 알려준다.
• HTTP와 달리 전이중 통신(TCP 사용)이 가능하고, TCP 위에서 메시지를 주고 받을 수 있다.

URI Scheme

• WebSocket 프로토콜은 ws(WebSocket)과 wss(WebSocket Secure)를 사용한다.

ws://domain/path

Server Sent Event(SSE)

참고 자료 : mdn web docs Server-sent events, wikipedia Server-sent events

HTTP를 통해 서버에서 보내는 데이터를 클라이언트가 자동으로 수신하는 기술

• 메시지 업데이트나 서버로부터 오는 지속적인 데이터를 반영할 때 사용한다.
• 클라이언트가 새 데이터를 받으려면 서버로 먼저 HTTP 요청을 전송 해야 서버가 데이터를 응답으로 보내줬지만, Server Sent Event를 적용하면 서버가 자동으로 클라이언트에 새 데이터를 먼저 전송할 수 있다.