[10분 테코톡] 🧲코일의 Web Socket

1. 웹 소켓이란?

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

- W3C와 IETF에 의해 자리잡은 표준 프로토콜 중 하나

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

*IETF : 인터넷의 운영, 관리, 개발에 대해 협의하고 프로토콜과 구조적이 시안들을 분석하는 인터넷 표준화 작업 기구

 

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

- 웹 소켓을 지원하는 브라우저의 경우 웹 소켓 프로토콜을 지원

 

 

 

2. 웹 소켓의 특징

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

- 데이터 송수신을 동시에 처리할 수 있는 통신 방법

- 클라이언트와 서버가 서로에게 원할 때 데이터를 주고 받을 수 있다

- 통상적인 Http 통신은 Cilent가 요청을 보내는 경우에만 Server가 응답하는 단방향 통신

 

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

- 웹 환경에서 연속된 데이터를 빠르게 노출

ex) 채팅, 주식

- 여러 단말기에 빠르게 데이터를 교환

 

 

 

3. 웹 소켓 이전의 실시간 통신

● Polling

- 서버로 일정 주기 요청 송신

  real-time 통신에서는 언제 통신이 발생할지 예측이 불가능

  불필요한 request와 connection을 생성

- real-time 통신이라고 부르기 애매할 정도의 실시간성

 

● Long Polling

- 서버에 요청 보내고 이벤트가 생겨 응답 받을 때 까지 연결 종료X

- 응답 받으면 끊고 다시 재요청

 

● Streaming

- 서버에 요청 보내고 끊기지 않은 연결상태에서 끊임없이 데이터 수신

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

 

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

 

 

 

4. 웹 소켓 동작 방법

 - 헨드 쉐이킹

Client Web socket		Server Web socket
http(80) or https(443)	http ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯>	http(80) or https(443)
연결 수립 요청할 때 헤더 GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlHNh.... Origin: http://example.com  Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13
http(80) or https(443)	http    <⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯	http(80) or https(443)
		HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3p....

 

GET /chat HTTP/1.1	반드시 GET메서드를 사용 연결 수립 과정은 HTTP 프로토콜 사용
Host: server.example.com	웹소켓 서버의 주소
Upgrade: websocket	현재 클라이언트, 서버, 전송 프로토콜 연결에서  다른 프로토콜로 업그레이드 또는 변경하기 위한 규칙
Connection: Upgrade	Upgrade 헤더 필드가 명시되었을 경우, 송신자는 반드시 Upgrade 옵션을 지정한 Connection 헤더 필드도 전송
Sec-WebSocket-Key: dGhlHNh....	길이가 16바이트인 임의로 선택된 숫자를 base64로 인코딩 한 값
Origin: http://example.com	클라이언트로 웹 브라우저를 사용하는 경우에 필수항목으로 클라이언트의 주소
Sec-WebSocket-Protocol: chat, superchat	- 클라이언트가 요청하는 여러 서브프로토콜을 의미 - 공백문자로 구분되며 순서에 따라 우선권이 부여 - 서버에서 여러 프로토콜 혹은 프로토콜 버전을 나워서 서비스할 경우   필요한 정보
Sec-WebSocket-Version: 13

 

- 데이터 전송

Client Web socket		Server Web socket
	헨드 쉐이크 완료
ws(80) or wss(443)	Web socket ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯>	ws(80) or wss(443)
ws(80) or wss(443)	Web socket    <⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯	ws(80) or wss(443)

프로토콜이 ws로 변경

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

 

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

frame : communication 에서 가장 작은 단위의 데이터, 작은 헤더 + payload로 구성

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

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

 

프레임이란?

프레임 헤더 구조

0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
E N D	R S V 1	R S V 2	R S V 3	Opcode				M A S K	Length

- END : 이 프레임이 전체 메시지의 끝인지 나타내는 플래그

- Opcode : 이 프레임이 어떻게 사용될지

     Continue (0x0) : 전체 메시지의 일부임을 의미

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

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

     Close (0x8) : Close 헨드쉐이크를 시작한다는 의미

- Length : 이 프레임에 포함된 데이터의 총 길이를 나타내는 단위

 

 

Client Web socket		Server Web socket
	헨드 쉐이크 완료
	데이터 양방향 전송 완료
ws(80) or wss(443)	Web socket ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯>	ws(80) or wss(443)
ws(80) or wss(443)	Web socket    <⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯	ws(80) or wss(443)
	Close frame을 주고 받으며 연결 종료

 

 

간단 정리

브라우저		웹서버
	HTTP ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯> websocket을 사용할 수 있습니까? 여기 websocket을 위한 magic key가 있습니다
	HTTP <⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ websocket이 준비됐습니다 websocket 연결을 하시죠
	Websocket ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯> 0x00 <UTF8 payload> 0xff
	Websocket <⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ 0x00 <UTF8 payload> oxff
	... 데이터 교환 ...
	websocket ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯> 0x00 0xff (연결을 종료합니다.)

 

 

 

5. 웹 소켓 프로토콜의 특징

- 최초 접속에서만 http 프로토콜 위에서 handshaking을 하기 때문에 http header를 사용

- 웹소켓을 위한 별도의 포트는 없으며, 기존 포트(http-80, https-443)을 사용

- 프레임으로 구성된 메시지라는 논리적 단위로 송수신

- 메시지에 포함될 수 있는 교환 가능한 메시지는 텍스트와 바이너리

 

 

 

6. 웹 소켓 한계

6-1) Socket.io, SockJS

웹소켓 ⎯⎯⎯⎯⎯> HTML5

   그럼 HTML5 이전의 기술로 구현된 서비스에서는?

 

- HTML5 이전의 기술로 구현된 서비스에서 웹 소켓처럼 사용할 수 있도록 도와주는 기술

- Javascript를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현

- Websocket, FlashSocket 등등 하나의 API로 추상화

- 즉, 브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용하는 방식

 

6-2) STOMP

- WebSocket은 문자열들을 주고 받을 수 있게 해줄 뿐 그 이상의 일 X

- 주고 받는 문자열의 해독은 온전히 어플리케이션에 맡긴다.

- HTTP는 형식을 정해두었기 때문에 모두가 약속을 따르기만 하면 해석할 수 있다.

- 하지만 WebSocket은 형식이 정해져 있지 않기 때문에 어플리케이션에서 쉽게 해석하기 힘들다.

- 때문에 WebSocket 방식은 sub-protocol을 사용해서 주고 받는 메시지의 형태를 약속하는 경우가 먾다.

 

STOMP(Simple Text Oriented Message Protocol)

- 채팅 통신을 하기 위한 형식을 정의

- HTTP와 유사하게 간단히 정의되어 해석하기 편한 프로토콜

- 일반적으로 웹소켓 위에서 사용

 

 

프레임 구조

COMMAND

header1:value1

header2:value2

 

BodyBodyBodyBody^@

 

- 프레임 기반의 프로토콜이다. 프레임은 명령, 헤더, 바디로 구성된다.

- 자주 사용되는 명령은 CONNECT, SEND, SUBSCRIVE, DISCONNECT 등이 있다.

- 헤더와 바디는 빈 라인으로 구분하며, 바디의 끝은 NULL문자로 설정한다.

---

참고

https://www.youtube.com/watch?v=MPQHvwPxDUw&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC