WebSocket 통신

박병찬·2021년 10월 3일
0
post-custom-banner

📌 WebSocket이란?

  • 브라우저 기반 애플리케이션에 효율적인 양방향 통신을 구현하기 위한 기술.
  • 웹소켓은 서버와 클라이언트 간의 효율적인 양방향 통신을 실현하기 위한 구조.
  • 실시간 웹을 구현하기 위한 기술.

WebSocket은 웹 서버와 웹 브라우저가 지속적으로 연결된 TCP 라인을 통해 실시간으로 데이터를 주고 받을 수 있도록 하는 HTML5의 새로운 사양이다. 따라서 WebSocket을 이용하면 일반적인 TCP소켓과 같이 연결지향 양방향 전이중 통신이 가능하다.

웹 소켓은 매우 짧은 대기시간과 높은 볼륨이 필요한 경우에 매우 효과적인 대책이 된다. 실시간 양방향 데이터 통신이 필요한 경우, 많은 수의 동시 접속자를 수용해야 하는 경우, 브라우저에서 TCP 기반의 통신으로 확장해야 하는 경우 등의 상황에서 사용하면 좋다.

Real-time web application

서버 쪽 또는 클라이언트 쪽 데이터가 실시간으로 업데이트 되는 웹 어플리케이션

🔥 장점

  • Web Socket은 Stateful protocol이다. 그래서 클라이언트와 한 번 연결이 되면 계속 같은 라인을 사용해서 통신하기 때문에 HTTP 사용시 필요없이 발생되는 HTTP와 TCP연결 트래픽을 피할 수 있다.
  • Web Socket은 HTTP와 같은 포트(80)을 사용하기에 기업용 어플리케이션에 적용할 때 방화벽은 재설정 하지 않아도 되는 장점이 있다.

💩 단점

  • WebSocket은 HTTP와 다르게 상태를 유지(Stateful)하기 때문에 서버와 클라이언트는 연결을 항상 유지해야한다.

  • 부하가 발생할 수 있고, 비정상적으로 연결이 끊어졌을 때 적절하게 대응할 수 있어야 한다.

🔧 작동 원리

📝 (1) Opening Handshake

웹소켓 클라이언트에서 핸드쉐이크 요청(HTTP Upgrade)을 전송하고 이에 대한 응답으로 핸드 셰이크 응답을 받는데, 이때 응답 코드는 101이다. 101은 '프로토콜 전환'을 서버가 승인했음을 알리는 코드이다.

Upgrade
  • 프로토콜을 전환하기 위해 사용하는 헤더.
  • 웹소켓 요청 시에는 반드시 websocket이라는 값을 가지며, 이 값이 없거나 다른 값이면 cross-protocol attack이라고 간주하여 웹소켓 접속을 중지시킨다.
Connection
  • 현재의 전송이 완료된 후 네트워크 접속을 유지할 것인가에 대한 정보.
  • 웹소켓 요청 시에는 반드시 Upgrade라는 값을 가지며, Upgrade와 마찬가지로 이 값이 없거나 다른 값이면 웹소켓 접속을 중지시킨다.
Sec-WebSocket-Key
  • 유효한 요청인지 확인하기 위해 사용하는 키 값.
Sec-WebSocket-Protocol
  • 사용하고자 하는 하나 이상의 웹 소켓 프로토콜 지정. 필요한 경우에만 사용.
Sec-WebSocket-Version
  • 클라이언트가 사용하고자 하는 웹소켓 프로토콜 버전.

📝 (2) Data Transfer

  • Handshake를 통해 웹소켓에 연결이 되면 데이터 전송 파트가 시작된다.
  • 여기에서는 클라이언트와 서버가 '메시지'라는 개념으로 데이터를 주고받는데, 여기서 메시지는 한 개 이상의 '프레임'으로 구성되어 있다.
  • Handshake가 끝난 시점부터 서버와 클라이언트는 서로가 살아 있는지 확인하기 위해 heartbeat 패킷을 보내며, 주기적으로 ping을 보내 체크한다. 이는 서버와 클라이언트 양측에서 설정 가능하다.

📝 (3) Close Handshake

  • 클라이언트와 서버 모두 커넥션을 종료하기 위한 컨트롤 프레임을 전송할 수 있다.
  • 이 컨트롤 프레임은 Closing Handshake를 시작하라는 특정한 컨트롤 시퀀스를 포함한 데이터를 가지고 있다.
  • 서버가 커넥션을 종료한다는 프레임을 보내고, 클라이언트가 이에 대한 응답으로 Close 프레임을 전송하면 웹소켓 연결이 종료된다.
  • 연결 종료 이후에 수신되는 모든 추가적인 데이터는 버려진다.
profile
안녕하세요
post-custom-banner

0개의 댓글