Web Socket

wookhyung·2022년 12월 11일
0

톺아보기

목록 보기
8/8

발표 스터디 9번째 주제로 선정한, Web Socket 에 대한 정리 글입니다.

1. 웹 소켓이란?

  • 두 프로그램 간의 메세지를 교환하기 위한 통신 방법 중 하나
  • W3CIETF에 의해 자리잡은 표준 프로토콜 중 하나
    • W3C: 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직
    • IETF: 인터넷의 운영, 관리, 개발에 대해 협의하고 프로토콜과 구조적인 사안들을 분석하는 인터넷 표준화 작업 기구
  • 현재 인터넷 환경(HTML5)에서 많이 사용된다.
  • 웹 소켓을 지원하는 브라우저의 경우 웹 소켓 프로토콜을 지원한다.

2. 웹 소켓의 특징

  1. 양방향 통신 (Full-Duplex)
    • 데이터 송수신을 동시에 처리할 수 있는 통신 방법
    • 클라이언트와 서버가 서로에게 원할 때, 데이터를 주고 받을 수 있다.
    • 통상적인 HTTP 통신은 Client가 요청을 보내는 경우에만 Server가 응답하는 단방향 통신
  2. 실시간 네트워킹(Real Time-Networking)
    • 웹 환경에서 연속된 데이터를 빠르게 노출
      • ex) 채팅, 주식, 비디오 데이터, …
    • 여러 단말기에 빠르게 데이터를 교환

3. 웹 소켓 이전의 비슷한 기술

💡 HTTP 에서도 실시간성을 보장하는 기법이 존재한다!

  • Polling
    • 서버로 일정 주기로 요청을 송신함.
    • Real-time 통신에서는 언제 통신이 발생할지 예측이 불가능하기 때문에, 불필요한 requestconnection을 생성함.
    • Real-time 통신이라고 부르기 애매할 정도의 실시간성
  • Long Polling
    • Polling의 단점을 해소하기 위해 서버에서 대기하다가 이벤트 발생 시에만 응답을 보냄.
    • 서버에 요청을 보내고 이벤트가 생겨 응답을 받을 때까지 연결을 종료하지 않고, 응답을 받으면 끊고 다시 재요청하는 방식
    • 많은 양의 메세지가 쏟아질 경우, 결국 Polling과 같아짐.
  • Streaming
    • 서버에 요청을 보내고 끊기지 않은 연결상태에서 끊임없이 데이터를 수신함.
    • 클라이언트에서 서버로의 데이터 송신이 어렵다.

💡 결과적으로 모든 방법이 HTTP를 통해 통신하기 때문에 Request, Response 둘 다 Header가 불필요하게 큼.

HTTP vs 웹소켓

HTTP웹소켓
비 연결성연결 지향
매번 연결 맺고 끊는 과정의 비용한 번 연결 맺은 뒤 유지
요청 - 응답 구조양방향 통신
  • HTTP
  • WebSocket

4. 웹소켓 동작 방법 - 핸드 쉐이킹

💡 핸드 쉐이킹은 httphttps를 통해서 이루어짐.

// 연결 수립을 요청할 때의 HTTP 헤더
GET /chat HTTP/1.1
Host: server.com 
Upgrade: websocket 
Connection: Upgrade 
Sec-WebSocket-Key: dGgnnsduwqka17gdsSB3j==  
Origin: http://example.com  
Sec-WebSocket-Protocol: chat, superchat 
Sec-WebSocket-Version: 13 
  • GET /chat HTTP/1.1
    • 연결 수립 과정은 HTTP 프로토콜 사용
    • HTTP 버전은 1.1 이상 사용
    • 반드시 GET 메서드를 사용
  • Host
    • 웹소켓 서버의 주소
  • Upgrade
    • 현재 클라이언트, 서버, 전송 프로토콜 연결에서 다른 프로토콜로 업그레이드 또는 변경하기 위한 규칙
  • Connection
    • Upgrade 헤더 필드가 명시되었을 경우, 송신자는 반드시 Upgrade 옵션을 지정한 Connection 헤더 필드로 전송
  • Sec-WebSocket-Key
    • 길이가 16바이트인 임의로 선택된 숫자를 base64로 인코딩 한 값
    • 클라이언트와 서버 간 서로의 신원을 인증하기 위한 키
  • Origin
    • 클라이언트로 웹 브라우저를 사용하는 경우 필수항목, 클라이언트의 주소
  • Sec-WebSocket-Protocol
    • 클라이언트가 요청하는 여러 서브프로토콜을 의미
    • 공백문자로 구분하며 순서에 따라 우선권이 부여
    • 서버에서 여러 프로토콜 혹은 프로토콜 버전을 나눠서 서비스할 경우 필요한 정보
// HTTP 응답 헤더
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRb+jfgh=
  • 101 Switching Protocols
    • 101 Switching Protocols가 Response로 오면 웹소켓이 연결됐다는 의미
  • Sec-WebSocket-Accept
    • 클라이언트로 받은 Sec-WebSocket-Key를 사용하여 계산된 값
    • 클라이언트에서 계산한 값과 일치하지 않으면 연결 수립이 되지 않음.

핸드 쉐이크 완료!, 데이터를 전송해보자.

  • 프로토콜이 ws로 변경
    • 데이터 보안을 위해서 SSL을 적용한 wss 프로토콜도 있음.
  • Message
    • 여러 frame이 모여서 구성하는 하나의 논리적 메세지 단위
  • frame: communication에서 가장 작은 단위의 데이터, 작은 헤더 + payload로 구성
    • HTTP의 큰 헤더 단점을 해소하기 위함
    • 웹소켓 통신에 사용되는 데이터는 UTF8 인코딩
      • ex) 0x00 (data) 0xff

5. 웹소켓 프로토콜 특징

  • 최초 접속에서만 http 프로토콜 위에서 핸드쉐이킹을 하기 때문에 http header를 사용한다.
  • 웹소케을 위한 별도의 포트는 없으며 기존 포트 (http-80, https-443)을 사용
  • 프레임으로 구성된 메시지라는 논리적 단위로 송수신
  • 메세지에 포함될 수 있는 교환 가능한 메시지는 텍스트와 바이너리

6. 웹소켓의 한계

  • 웹소켓은 HTML5 이후로 등장한 기술이므로, HTML5 이전의 기술로 구현된 서비스에서 사용할 수 없음.

대안으로 나온 Socket.io

  • HTML5 이전의 기술로 구현된 서비스에서 웹 소컷처럼 사용 할 수 있도록 도와주는 기술
  • JavaScript를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현
  • 브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용하는 방식

Reference

https://youtu.be/MPQHvwPxDUw
https://youtu.be/yXPCg5eupGM
https://youtu.be/rvss-_t6gzg

profile
Front-end Developer

0개의 댓글