웹 쏘쏘쏘켓 vs SSE

웹 소켓 소개

웹소켓 프로토콜은 웹 애플리케이션을 위한 새로운 기능으로써 클라이언트 양방향 통신의 오랜 역사를 가지고 있다. HTTP와는 다른 TCP 프로토콜이지만 HTTP에서 동작가능하게 디자인 되었고 80, 443 포트를 사용하며 방화벽규칙을 재사용할 수 있도록 되어있다.

 

일반 HTTP 요청에 Upgrade 헤더를 포함한 reqeust를 전송하면 WebSocket protocol로 변환되며 WebSocket interaction이 시작된다.

 

SSE 자세히 알아보기

SSE는 서버의 데이터를 실시간, 지속적으로 클라이언트에 보내는 기술이다. 위의 그림처럼 클라이언트에서 처음 HTTP 연결을 맺고 나면 서버는 클라이언트로 계속하여 데이터를 전송할 수 있다.

일반적으로 HTTP 요청은 하나의 [요청 - 응답] 과정을 거치고 연결을 종료한다. 하지만 파일 전송과 같이 연결 상태를 유지하고 계속 데이터를 보내는 경우도 있다. SSE는 이와 같이 한 번 연결 후 서버에서 클라이언트로 데이터를 계속해서 보낼 수 있다.

특징

• websocket과 달리 별도의 프로토콜을 사용하지 않고 HTTP 프로토콜만으로 사용이 가능하며 훨씬 가볍다.
• 접속에 문제가 있으면 자동으로 재연결을 시도한다.
• 최대 동시 접속 수는 HTTP/1.1의 경우 브라우저 당 6개이며, HTTP/2는 100개까지 가능하다.
• IE를 제외한 브라우저에서 지원된다.(Polyfills을 사용하면 가능하다고 한다.)
• 이벤트 데이터는 UTF-8 인코딩된 문자열만 지원한다. 일반적으로 JSON으로 마샬링하여 전송한다.
• 클라이언트에서 페이지를 닫아도 서버에서 감지하기가 어렵다.

 

웹소켓과 SSE(Server-Sent-Event)에 차이점

 

Socket과 SSE에 가장 큰 차이점을 하나 말해보라고 한다면 Socket은 양방향(bidirectional)으로 데이터를 주고 받을 수 있지만 SSE(Server-Sent-Event)를 사용하게 되면 클라이언트는 데이터를 받을 수만(mono-directional) 있게 됩니다. 그러니까 어떤 기능이 필요한지에 따라서 뭐를 사용할지 결정하면 됩니다. 

 

	Socket	Server-Sent-Event
브라우저 지원	대부분 브라우저에서 지원	대부분 모던 브라우저 지원(polyfills 가능)
통신 방향	양방향	일방향(서버에서 클라이언트로)
리얼타임	Yes	Yes
데이터 형태	Binary, UTF-8	UTF-8
자동 재접속	No	Yes(3초마다 제시도)
최대 동시 접속 수	브라우저 연결 한도는 없지만 서버 셋업에 따라 다름	HTTP를 통해서 할 때는 브라우저당 6개 까지 가능 / HTTP2로는 100개가 기본
프로토콜	websocket	HTTP
베터리 소모량	큼	작음
Firewall 친화적	Nope	Yes

브라우저가 SSE를 지원하는지 안 하는지 알아보는 방법 자바스크립트

if ('EventSource' in window) {
  // use polyfills
}
var source = new EventSource('URL');