CS/네트워킹

[네트워킹] 웹소켓(WebSocket)

TTOII 2023. 1. 18. 23:44
728x90

웹 소켓이란 ?

클라이언트(사용자의 브라우저)와 서버 사이에 socket connection을 유지해서 언제든 양방향 통신 또는 데이터 전송이 가능하도록 하는 기술이다.
Real-time application 구현을 위해 널리 사용된다. (SNS app, LoL 같은 멀티플레이어 게임, 구글 Doc, 증권거래, 화상채팅 등)

 

 

웹 소켓 사용 이유

http 프로토콜에서는 클라이언트가 서버에서 데이터를 받기 위해 초단위로 빠른 렌더링이 필요했다.

사용자 입장에서는 화면이 매번 새로고침되는 느낌을 받아 UX에 대한 만족이 낮아지게 된다.

 

WebSocket을 사용하면 주기적으로 렌더링하지 않아도 실시간으로 서버와 양방향 통신이 가능하다.

 

  • 웹 어플리케이션의 기존 통신은 대부분 HTTP를 통해 이루어졌으며 HTTP는 요청/응답 기반의 Stateless 프로토콜이다.
    → 클라, 서버간 Socket connection 같은 영구적인 연결이 아닌 클라쪽에서 필요해서 요청할 때만 서버가 응답하는 방식(한방향 통신)
    이러한 방식의 문제점은 서버쪽의 데이터가 업데이트되어도 클라쪽에서서 화면을 refresh하지 않는 이상 변경된 데이터가 업데이트되지 않는다는 점이다.

  • 웹소켓은 Stateful 프로토콜이다.
    → 클라이언트와 한번 연결이 되면 계속 같은 라인을 사용해서 통신하기 때문에 HTTP 사용시 필요없이 발생되는 연결 트래픽을 피할 수 있다.

  • 웹소켓은 HTTP와는 다른 TCP 프로토콜이지만 HTTP에서 동작 가능하게 설계되어 HTTP와 같은 포트번호(80)를 사용할 수 있다. 따라서 기업용 어플리케이션에 적용할 때 방화벽을 재설정하지 않아도 되는 장점이 있다.

 

 

WebSocket 구조

  1. 핸드쉐이크는 먼저 클라이언트가 HTTP로 웹소켓 연결 요청을 하면서 시작된다.
  2. 웹소켓 연결 요청에는 “Connection:Upgrade”와 “Upgrade:websocket” 헤더를 통해 웹소켓 요청임을 표시한다.
  3. 또한 “Sec-WebSocket-Key” 헤더를 통해 핸드쉐이크 응답을 검증할 키 값을 보낸다.
  4. 그 외에도 WebSocket 연결시 보조로 이용할 프로토콜 정보등의 추가적인 정보를 헤더에 담아 보낼 수 있다. 
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

위의 예시는 웹 소켓의 요청, 응답 예시이다.

서버의 요청, 응답이 모두 HTTP로 통신하며 정상적인 응답의 상태코드는 101(Switching Protocols)이다.

“Sec-WebSocket-Key” 헤더를 통해 받은 값에 특정 값을 붙인 후, SHA-1로 해싱하고 base64로 인코딩한 값을 “Sec-WebSocket-Accept” 헤더에 보낸다. 

 

이 값을 통해 클라이언트는 정상적인 핸드쉐이크 과정을 검증하며 클라이언트가 정상적으로 응답을 받으면 핸드쉐이크는 종료되고 이후부터 웹소켓 프로토콜을 통해 데이터 통신을 한다.

 

 

HTTP와 다른점 ?

  • 가장 큰 차이는 프로토콜이다. 웹소켓 프로토콜은 맨처음 연결시에만 HTTP를 사용하고 이후 통신에는 웹소켓 독자의 프로토콜을 사용한다.
    • 하나의 커넥션으로 데이터를 송수신한다.
  • 헤더가 작아 오버헤드가 적다.
  • 장기간 접속을 전제하므로 접속한 상태라면 데이터 송수신이 가능하다.

 

웹소켓의 문제점 ?

  • 구현이 복잡
    • Stateful 이므로 서버와 클라이언트 간의 연결을 항상 유지해야하며 비정상적으로 연결이 끊어졌을 때 적절한 대응이 필요함
  • 연결 유지 비용
    • 트래픽 양이 많은 서버는 CPU에 큰 부담이 될 수 있음
  • 모든 웹 브라우저 버전에서 지원하지 않는다.

 

 

참고

728x90
저작자표시 비영리