본문 바로가기
MJU Session (22-23)

[Session] WebSocket이란? / 이상민(M)

by mels 2023. 2. 12.

작성자: 이상민(M)


주제 선정 이유

 기본적인 커뮤니티 앱/웹을 구현하고자 할 때 채팅 서비스는 누구나 한번쯤 생각해 봤을 것이다. 처음에 채팅서비스를 구현하기 위해서 단순한 HTTP통신처럼 POST로 데이터를 보내고, 이 보내진 메시지를 GET요청을 통해 시간 순서대로 보여주면 되지않을까란 생각을 했다. 하지만 이런 방식으로 개발을 진행할 경우 새로운 메시지를 보기위해서는 계속해서 새로고침을 해야 하는데 이게 진짜 채팅서비스가 맞나라는 생각을 지울수가 없었다.

 

 결국 좀 더 제대로된 채팅서비스 구현을 위해서 구글링을 한 결과 웹 소켓이라는 것을 발견하게 되었고, 이번 세션을 통해서 간단하게 웹 소켓이 무엇인지 소개하는 글을 작성하고자 한다. 

 

웹 소켓이란 

HTML5 표준 기술로, HTTP 환경에서 클라이언트와 서버 사이에 하나의 TCP 연결을 통해 실시간으로 전이중 통신을 가능하게 하는 프로토콜이다. 즉 두 프로그램 간의 메시지를 교환하기 위한 통신 방법 중 하나이다.

 

* HTTP(HyperText Transfer Protocol) : 클라이언트와 서버 간 데이터(텍스트, 이미지, 동영상 등)를 주고 받기 위한 규칙(프로토콜)이다. HTTP 종류에는 TCP(연결형 서비스, 1:1통신, 전송 순서 보장), UDP(비연결 서비스, 전송 순서 보장 x, '편지'와 같음) 방식이 있다.

* 전이중 통신 (양방향 통신) : 전화와 같이 양방향으로 송신과 수신이 가능하다. 

* 단방향 통신 :  일방적인 송신 또는 수신만이 가능하다.

 

웹 소켓 특징 

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

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

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

 

* http 통신은 Client의 요청이 있을 때만 서버가 응답하고 연결을 종료하는 단방향 통신

 

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

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

- ex) 채팅, 주식, 비디오 데이터 

 

웹 소켓 이전의 실시간 통신

1. Polling 

2. Long Polling 

3. Streaming 

 

* 위 방식들 모두 HTTP를 통해 통신하기 때문에 Request, Response 둘 다 Header가 불필요하게 크다.

 

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

연결형 서비스를 제공하는 TCP에서 데이터를 전송하려면 연결 설정, 데이터 전송, 연결 해제라 는 3단계를 순차적으로 진행해야 한다. TCP를 사용하는 프로세스가 가장 먼저 실행하는 연결 설정이 바로 Three-Way Handshake 방식이다.

 웹 소켓은 전이중 통신이므로, 연속적인 데이터 전송의 신뢰성을 보장하기 위해 Handshake 과정(Opening Handshake - Data transfer - Closing Handshke) 을 진행한다.

 

 Opening Handshake 과정을 통해서 연결이 되면 HTTP 프로토콜에서 웹 소켓 프로토콜(ws)로 업그레이드된다. 업그레이드가 되면 HTTP는 사용되지 않고, 웹 소켓 연결이 닫힐 때 까지 Endpoint에서 웹 소켓 프로토콜(ws)을 사용하여 데이터를 주고 받게 된다. 웹 소켓 연결은 주로 새로고침이나창 닫기 등의 이벤트 발생 시 닫힌다.  (ws://localhost:8080/chat 으로 접속하려고 한다고 가정하자.)

 

클라이언트 요청(Request) 헤더 

GET /chat HTTP/1.1
Host: localhost:8080
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://localhost:9000

 

1. GET /chat HTTP/1.1 :웹소켓의 통신 요청에서, HTTP 버전은 1.1 이상이어야하고 GET 메서드를 사용

2. Upgrade : 프로토콜을 전환하기 위해 사용하는 헤더

3. Connection : 현재의 전송이 완료된 후 네트워크 접속을 유지할 것인가에 대한 정보

4. Sec-WebSocket-Key : 유효한 요청인지 확인하기 위해 사용하는 키 값

5. Sec-WebSocket-Protocol : 사용하고자 하는 하나 이상의 웹 소켓 프로토콜 지정. 필요한 경우에만 사용

6. Sec-WebSocket-Version : 클라이언트가 사용하고자 하는 웹소켓 프로토콜 버전

7. Origin : CORS 정책으로 만들어진 헤더로 Cross-Site Websocket Hijacking과 같은 공격을 피하기 위함

 

서버 응답(Response) 헤더 

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

 

1. HTTP/1.1 101 Switching Protocols : 101은 HTTP에서 WS로 프로토콜 전환이 승인 되었다는 응답코드

2. Sec-WebSocket-Accept : 요청 헤더의 Sec-WebSocket-Key에 유니크 아이디를 더해서 SHA-1로 해싱한 후 base64로 인코딩한 결과,  웹 소켓 연결이 개시되었음을 알림

 

Data Transfer 

Opening HandShake에서 승인이 나고나면, 웹 소켓 프로토콜로 Data transfer 이 진행된다. 여기서 데이터는 메시지라는 단위로 전달된다.

 

1. 메시지 : 여러 프레임(frame)이 모여서 구성되는 하나의 논리적인 메시지 단위

2. 프레임 : 데이터 링크계층(이더넷)에서 주고 받는 가장 작은 단위를 의미, 작은 헤더 + payload 로 구성

 

웹 소켓 vs HTTP

 웹 소켓이 HTTP 요청으로 시작되며 HTTP에서 동작하지만, 두 프로토콜은 분명히 다르게 동작한다.  

 

 HTTP는 클라언트와 서버 간에 접속을 유지하지 않고, 요청과 응답 형태로 단방향 통신만 가능하다. 결국 요청-응답이 완료되면 연결이 닫힌다. 하지만 웹 소켓은 클라이언트와 서버 간 접속이 유지되며 요청-응답 개념이 아닌 서로 데이터를 주고 받는 형식이다. 

 

 Rest한 방식의 HTTP 통신은 많은 URI와 Http Method를 통해 어플리케이션과 상호작용하지만, 웹 소켓은 초기 연결 수립을 위한 오직 하나의 URL만 존재하며, 모든 메시지는 초기에 연결된 TCP 연결로만 통신한다.


참고