Web Socket이란?

Web Socket

웹 소켓이란?

두 프로그램 간의 메시지를 교환하기 위한 통신 방법 중 하나입니다.

W3C와 IETF에 의해 자리잡은 표준 프로토콜 중 하나 하나입니다. 중요X

현재 인터넷 환경(HTML5)에서 많이 사용됩니다.

W3C
월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직

IETF
월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직
구조적인 사안들을 분석하는 인터넷 표준화 작업 기구

웹 소켓을 지원하는 브라우저의 경우 웹 소켓 프로토콜을 지원합니다.

 

---

웹 소켓의 특징

1. 양방향 통신 (Full - Duplex)

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

2. 실시간 네트워킹 (Real Time - Networking)

• 웹 환경에서 연속된 데이터를 빠르게 노출합니다.
  ex) 채팅, 주식, 비디오 데이터
• 여러 단말기에 빠르게 데이터를 교환합니다.

---

웹 소켓 이전의 비슷한 기술

즉, 실시간 네트워킹을 하면서 양방향 통신을 하는 기술을 말합니다.

 

1. Polling

서버에 일정 주기로 요청을 송신하고 응답을 받는 기술입니다.

real-time 통신에서는 언제 통신이 발생할지 예측이 불가능하기 때문에
불필요한 request와 connection을 생성합니다.

예를 들어 변경사항이 없음에도 요청은 해야하는 상황이 발생합니다.

Real-time 통신이라고 부르기 애매할 정도의 실시간성을 가집니다.

2. Long Polling

서버에 요청을 보내고 이벤트가 생겨 응답 받을 때 까지 연결을 유지합니다.

응답 받으면 끊고 다시 재요청 합니다.

많은 양의 메세지가 쏟아질 경우 polling과 같습니다.

3. Streaming

서버에 요청을 보내고 끊기지 않은 상태에서 끊임없이 데이터를 수신합니다.

클라이언트에서 서버로의 데이터 송신이 어렵습니다.

결과

위의 모든 방법이 HTTP를 통해 통신하기 때문에

Request, Response 둘다 Header가 불필요하게 큽니다.

따라서 빠르게 데이터를 주고받지 못합니다.

---

웹 소켓 동작 방법

핸드 쉐이킹 [요청]

웹 소켓 또한 핸드 쉐이킹이 필요합니다.

핸드 쉐이킹은 웹 소켓 프로토콜이 아닌

http 혹은 https 프로토콜을 통해 이루어집니다.

이미지의 Http Header는 연결 수립을 요청할 때의 헤더입니다.

 

HTTP 버전 1.1 이상이여야 하고 반드시 GET메소드를 사용해야 합니다.

 

Host: 웹 소켓 서버의 주소를 나타냅니다.

 

Upgrade: websocket -> 다른 프로토콜로 업그레이드 or 변경하기 위한 규칙

Connection: Upgrade -> Upgrade 옵션 지정

Upgrade 와 Connection Header가 없으면 웹소켓 연결이 불가능합니다.

 

Sec-WebSocket-Key: 길이가 16바이트인 임의로 선택된 숫자를 base64로 인코딩한 값

이것을 통해 서버간의 신원을 인증합니다.

 

Origin: http://example.com 

클라이언트로 웹 브라우저를 사용하는 경우에 필수항목으로

클라이언트의 주소입니다.

 

Sec-WebSocket_Protocol: chat, superchat

클라이언트가 요청하는 여러 서브프로토콜을 의미합니다.

공백 문자로 구분되며 순서에 따라 우선권이 부여됩니다.

서버에서 여러 프로토콜 혹은 프로토콜 버전을 나눠서

서비스할 경우 필요한 정보입니다.

서버는 자신이 지원하는 프로토콜을 반환합니다.

 

핸드 쉐이킹 [응답]

Sec-WebSocket-Accept: 클라이언트로부터 받은

Sec-WebSocket-Key를 사용하여 계산된 값입니다.

클라이언트에서 계산한 값과 일치하지 않으면 연결을 수립하지 않습니다.

 

데이터 전송

핸드 쉐이킹이 완료되면 데이터를 주고받습니다.

이때부터는 프로토콜이 ws로 변경됩니다.

wss
데이터 보안을 위해서 SSL을 적용한 프로토콜

데이터를 주고받는데 있어서 단위는 Message를 사용합니다.

Message: 여러 frame들이 모여서 구성하는 하나의 논리적 메세지 단위

 

frame: communication에서 가장 작은 단위의 데이터 입니다.

작은 헤더 + payload로 구성됩니다.

웹 소켓 통신에 사용되는 데이터는 UTF8 인코딩 입니다.

ex) 0x00 (보내고 싶은 데이터) 0xff

 

프레임이란?

RSV1, 2, 3 은 프로토콜 별로 사용, 미사용 이기때문에 설명을 생략합니다.

 

Opcode 

프레임이 어떻게 사용될지에 대해 나타냅니다.

Continue (0x0): 전체 메시지의 일부임을 의미합니다. (END와 연관)

Text (0x1): 포함된 데이터가 UTF-8 텍스트라는 의미입니다.

Binary (0x2): 포함된 데이터가 이진 데이터라는 의미입니다.

Close (0x8): Close 핸드쉐이크를 시작한다는 의미입니다.

 

Length

이 프레임에 포함된 데이터의 총 길이를 나타내는 단위입니다.

 

데이터 양방향 전송 완료

정리

웹 소켓 동작 방법

---

웹 소켓 프로토콜 특징

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

 

웹 소켓의 한계

웹소켓은 HTML5 이후에 나왔습니다. 그렇다면

HTML5 이전의 기술로 구현된 서비스에서는 어떻게 해야할까요?

 

Socket.io와 SockJS

• HTML5 이전의 기술로 구현된 서비스에서
  웹 소켓처럼 사용할 수 있도록 도와주는 기술입니다.(실시간 통신)
• Javascript를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현합니다.
• WebSocket, FlashSocket, AJAX Long Polling, AJAX Multi part Streaming,
  IFrame, JSONP Polling을 하나의 API로 추상화 합니다.

즉, 브라우저와 웹 서버의 종류와 버전을 파악하여 

가장 적합한 기술을 선택하여 웹소켓처럼 사용하는 방식입니다.

 

STOMP(Simple Text Oriented Message Protocol)

• WebSocket은 문자열들을 주고 받을 수 있게 해줄 뿐 그이상의 일은 하지않습니다.
• 주고 받은 문자열의 해독은 온전히 어플리케잇녀에 맡깁니다.
• HTTP는 형식을 정해두었기 때문에 모두가 약속을 따르기만 하면 해석할 수 있습니다.
• 하지만 WebSocket은 형식이 정해져 있지 않기 때문에
  어플리케이션에서 쉽게 해석하기 힘듭니다.
• 때문에 WebSocket 방식은 sub-protocols을 사용해서
  주고받는 메시지의 형태를 약속하는 경우가 많습니다.

sub-protocol로 사용되는것이 바로 STOMP입니다.

1. STOMP는 채팅 통신을 하기 위한 형식을 정의합니다.

2. HTTP와 유사하게 간단히 정의되어 해석하기 편한 프로토콜입니다.

3. 일반적으로 웹소켓 위에서 사용됩니다.

 

 

stomp 형식의 메세지 예시

 

 

---

사진 출처 및 참고자료

유튜브 테코톡

https://www.youtube.com/watch?v=MPQHvwPxDUw