웹 소켓(WebSocket)이란 무엇인가요?

이 게시물은 우아한 테크코스 10분 테코톡 "코일의 WebSocket"을 보고 정리한 내용입니다.
저작권 관련해서 문제가 되면 댓글로 남겨주세요. 바로 삭제하겠습니다.
영상 링크 : https://www.youtube.com/watch?v=MPQHvwPxDUw

 

1) 웹 소켓이란?

• 두 프로그램 간의 메시지를 교환하기 위한 통신 방법 중 하나이다.
• W3C와 IETF에 의해 자리잡은 표준 프로토콜 중 하나이다.
• 현재 HTML5 환경에서 많이 사용된다.

 

2) 웹 소켓의 특징

• 양방향 통신(Full-Duplex)
  • 데이터 송수신을 동시에 처리할 수 있는 통신 방법
  • 클라이언트와 서버가 서로에게 원할 때 데이터를 주고 받는다.
  • 통상적인 HTTP 통신은 클라이언트가 요청을 보내는 경우에만 서버가 응답하는 단방향 통신

 

• 실시간 네트워킹(Real Time-Networking)
  • 웹 환경에서 연속된 데이터를 빠르게 노출한다.
  • 여러 단말기에 데이터를 빠르게 교환한다.
  • ex) 채팅, 주식, 비디오 데이터

 

• 웹 소켓 이전의 비슷한 기술
  • Polling : 일정 주기로 요청을 송신하는 것.
    • 실시간 네트워킹에서는 언제 통신이 발생할지 예측이 불가능하므로 불필요한 요청과 연결을 생성한다.
    • 즉 바뀐게 없는데도 요청을 계속하고 응답도 계속 한다.
  • Long Polling
    • Polling의 단점을 해소하기 위해서 서버에서 조금 더 대기를 하면서, 이벤트가 발생할 때 응답을 하는 방식
    • 응답을 받으면 끊고 다시 재요청한다.
    • 결국 많은 양의 메시지가 쏟아지면 Polling과 동일해진다.
  • Streaming
    • 서버에 요청 보내고 끊기지 않은 연결상태에서 끊임없이 데이터를 수신한다.
    • 클라이언트에서 서버로의 데이터 송신이 어렵다.
  • 세 개의 방식 모두 HTTP를 통해 통신하기 때문에 요청/응답 모두 헤더가 불필요하게 크다는 단점이 있다.💥

 

3) 웹 소켓의 동작 방법 1 - Hand Shaking

요청(Request) - http(80) or https(443)

// 웹 소켓 요청 HTTP 헤더의 예시 (클라이언트 -> 서버)

GET /chat HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

• GET /chat HTTP/1.1 : 반드시 GET 방식으로만 요청해야한다. HTTP는 1.1 이상이어야한다.
• Host: example.com:8000 : 웹 소켓 서버의 주소
• Upgrade: websocket : 현재 클라이언트, 서버, 전송 프로토콜 연결에서 다른 프로토콜로 업그레이드 또는 변경하기 위한 규칙
• Connection: Upgrade : 송신자는 반드시 Upgrade 옵션을 지정한 Connection 헤더 필드가 필요하다.
• Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== : 클라이언트와 서버 간 서로의 신원을 인증한다.
• Origin: http://example.com : 클라이언트의 주소
• Sec-WebSocket-Protocol: chat, superchat : 여러 서브 프로토콜을 의미한다. 이 중에서 서버가 지원하는 프로토콜을 다시 반환한다.

 

응답(Response) - http(80) or https(443)

// 웹 소켓 응답 HTTP 헤더의 예시 (서버 -> 클라이언트)

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

• 101 Switching Protocols : 101 Switching Protocols가 응답으로 오면 웹 소켓이 연결되었다는 의미이다.
• Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
  • 클라이언트로 부터 받은 Sec-WebSocket-Key를 사용하여 계산된 값으로 서로의 신원을 인증하는 과정에 필요한 헤더
  • 클라이언트에서 계산한 값과 일치하지 않으면 연결하지 않는다.

 

4) 웹 소켓의 동작 방법 2 - 데이터 전송

HTTP를 이용해 Hand Shaking이 완료되었으므로, 이제 프로토콜이 WS로 변경된다.
지금부터는 HTTP 라고 하지 않는다. 그리고 이 순간부터 양방향 통신이 가능해진다.

• ws(80) or wss(443) 으로 통신한다. wss란 https 처럼 ws 프로토콜에 데이터 보안을 위해 SSL을 적용한 프로토콜이다.
• Message : 여러 Frame이모여서 구성하는 하나의 논리적 메시지 단위. ws 프로토콜을 통해 주고 받는 단위라고 보면된다.
• Frame : Communication에서 가장 작은 단위의 데이터 (작은 헤더 + Payload 로 구성) -> 기존 무거운 헤더의 단점을 보완
• 웹 소켓 통신에 사용되는 데이터는 UTF-8 인코딩을 통해서만 지원된다.
• 0x00{보내고 싶은 데이터}0xff 와 같은 형태로 데이터를 주고 받는다.

 

5) 웹 소켓의 동작 방법 3 - 프레임

프레임의 헤더구조

• FIN (END) : 이 프레임이 전체 메시지의 끝인지 나타내는 플래그
• OPCODE
  • Continue (0x0) : 전체 메시지의 일부임을 의미
  • Text (0x1) : 포함된 데이터가 UTF-8 텍스트라는 의미
  • Binary (0x2) : 포함된 데이터가 이진 데이터라는 의미
  • close (0x8) : Close 핸드쉐이크를 시작한다는 의미
• Length : 이 프레임에 포함된 데이터의 총 길이를 나타내는 단위
• RSV 1~3 : 프로토콜 별로 사용할 수도 있고 사용할 수도 있지 않은 것들이다.

핸드 쉐이크도 완료되었고, 이로인한 데이터 양방향 전송도 모두 완료 되었다면 이제는 연결 종료해야 한다.

연결 종료 할 때는 Close Frame을 주고 받으며 종료한다.

 

6) 웹 소켓의 동작 과정 정리

1. HTTP를 이용해 클라이언트와 서버가 핸드 쉐이킹을 한다. (WebSocket 사용 가능 해? -> 응. 사용 가능해~)
2. UTF8로 인코딩된 페이로드를 0x00과 0xff 사이에 넣고 데이터를 주고 받는다. (WS 프로토콜로 양방향 데이터 전송)
3. Close Frame을 이용해 연결을 종료한다.

 

7) 웹 소켓 프로토콜의 특징

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

 

8) 웹 소켓의 한계 1 - Socket.io, SockJS

웹 소켓은 HTML5 이후에 나왔기 때문에, HTML5 이전의 기술에는 적용이 어렵다.

• 이때는 Socket.io와 SockJS라는 것을 이용해서 HTML5 이전 기술로 구현된 서비스에서도 웹 소켓처럼 사용할 수 있다.
• Javascript를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현한다.
• 브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용하는 방식이다.

 

9) 웹 소켓의 한계 2 - STOMP

웹 소켓은 문자열들을 주고 받을 수 있게 해줄 뿐 그 이상의 일은 하지 않는다.

• 즉 주고 받은 문자열의 해독은 온전히 애플리케이션에만 맡긴다.
• HTTP는 형식이 있으므로 애플리케이션에서 해석이 쉽지만, WS는 형식이 정해져 있지 않아서 해석하기 어렵다.
• 따라서 WS 방식은 Sub Protocol을 사용해서 주고 받는 메시지의 형태를 약속하는 경우가 많다.
• 이러한 Sub Protocol 중 하나가 STOMP(Simple Text Oriented Message Protocol) 이다.

 

STOMP(Simple Text Oriented Message Protocol)

• 채팅 통신을 하기 위한 형식을 정의한다.
• HTTP와 유사하게 간단히 정의되어 해석하기 편한 프로토콜이다.
• 일반적으로 웹 소켓 위에서 사용된다.
• 프레임 구조

  • COMMAND
    header1:value1
    header2:value2
    
    BodyBodyBodyBody^@

  • 프레임 기반의 프로토콜이다. 프레임은 명령, 헤더, 바디로 구성된다.
  • 자주 사용되는 명령은 CONNECT, SEND,SUBSCRIBE, DISCONNECT 등이 있다.
  • 헤더와 바디는 빈 라인으로 구분하며, 바디의 끝은 NULL 문자로 설정한다.

  • // 실제 STOMP 구조 예시
    
    >>> CONNECT
    notice:1
    accept-version:1.2
    heart-beat:10000.10000
    
    >>> SUBSCRIBE
    id:sub-1600335610276_227
    destination:/channel/1
    
    <<< MESSAGE
    destination:/channel/1
    content-type:application/json
    subscription:sub_1600335610276-227
    message-id:zowit0sl-2
    content-length:103