Web Socket 파헤쳐보기

웹 소켓(Web Socket)이란? 

웹 소켓이란 두 프로그램 간의 메시지 교환을 위한 통신 방법 중 하나입니다. 

 

 

웹 소켓 특징

양방향 통신(Full-Duplex)

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

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

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

웹 소켓은 양방향 통신이 가능

 

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

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

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

 

 

웹 소켓이 나오기전 양방향 통신 방식

1. Polling

일정한 주기로 서버에 요청 (Request)을 보내는 방법이며, setTimeout, setInterval 등으로 일정 주기마다 서버에 요청(Request)를 보냄

 

불필요한 Request , Connection을 생성하여 서버에 부담을 많이주게된다. 

요청 주기가 짧을 수록 부하가 커진다. 

'일정 주기마다' 요청을 보내는 것이기 때문에 실시간이라 보기에는 다소 무리가 있음. 

요청 주기가 짧으면 실시간 처럼 보이지만, 실제로는 실시간이 아님.

 

2. Long Polling

Polling의 단점을 최소화 하기 위해 서버에서 조금 더 대기해서 이벤트를 받는 방법 

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

Long Polling의 경우에도 많은 양의 메시지가 동시 다발적인 요청과 응답이 생기면 똑같이 부하가 생길 . 수있다. 

 

HTTP 통신을 하기에 Request, Response 헤더가 불필요하게 큼.

 

3. Streaming 

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

- Long Pooling에 비해 응답마다 다시 요청을 하지 않아도 되므로 효율적이지만, 연결 시간이 길어질 수록 연결 유효성 관리의 부담이 발생

- HTTP 통신을 하기에 Request, Response 헤더가 불필요하게 크다. 

 

📖웹 소켓 동작 과정 📖

 

 

맨위에 박스가 Opening HandShake

두 번째 박스가 Datatransfer

세 번째 박스가 보라색박스가 Closing HandShake

 

 

✨HandShake

Opening HandShake와 Closing HandShake는 일반적인 HTTP TCP 통신의 과정 중 하나이다.

 

접속 요청은 HTTP로 한 뒤, 웹소켓 프로토콜로 변경된다. (WS)

웹소켓 프로토콜로 변경되기 위한 HTTP 헤더는 아래처럼 구성되어있음. 

(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:8080

 

GET /chat HTTP/1.1

웹 소켓 통신 요청에서 HTTP버전은 1.1이상 , GET 메서드를 이용

 

Upgrade

프로토콜 전환하기 위해 사용되는 헤더 

웹소켓 요청시 websocket이라는 값을 가지게 된다. 

 

Connection

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

웹 소켓 요청 시에는 반드시 Upgrade라는 값을 가진다. 

Upgrade와 마찬가지로 이 값이 없거나 다른 값이면 웹 소켓 접속을 중지시킨다. 

 

Sec-WebSocket-Key 

유요한 요청인지 확인하기 위해 사용되는 키 값 

 

Sec-WebScoekt-Protocol 

사용하고자 하는 하나 이상의 웹 소켓 프로토콜 지정

 

Origin

Cors 정책으로 만들어진 헤더, Cross-Site Websocket Hijacking 과 같은 공격을 피하기 위해서이다.)

 

 

😎 응답 (Response) 헤더

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

 

HTTP/1.1 101 Switching Protocols

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

 

Sec-WebSocket-Accept

요청 헤더의 Sec-WebSocket-Key에 유니크 아이디를 더해서 SHA-1로 해싱한 후 base64로 인코딩한 결과이다. 

웹 소켓 연결이 개시되었음 알려준다. 

 

🤝 Data Transfer

Opening HandShake에서 승인을 해주고 나면, 

웹 소켓 프로토콜로 두 번째 박스 부분처럼 Data transfer진행

데이터는 여기서 메시지 단위로 진행한다. 

 

 

메시지 

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

 

프레임

통신에서 가장 작은 단위의 데이터이다. 

 

패킷은 전 네트워크 통신과정에서 가장 작은 데이터이고, 프레임은 데이터 링크 계층(이더넷)에서 주고 받는 가장 작은 단위를 의미한다. 

작은 헤더 + payload로 구성되어있다. 

 

 

☺️Socket.io

웹소켓은 HTML5이후에 나왔다고 했다, 그러면 HTML5이전의 기술로 구현된 서비스에서는 Socket.io, SockJS 와 같이 HTML5 이전의 기술로 구현된 서비스 에서 웹 소켓처럼 사용할 수 있도록 도와주는 기술이다

 

javascript를 이용해 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있고 WebSocket, FlashSocket, AJAX Long Polling, AJAX Multi part Streaming, IFrame, JSONP Polling을 하나의 API로 추상화

 

 

추가적으로 WebSocket방식은 sub-protocols를 사용해 주고 받는 메시지의 형태를 약속하는 경우가 많다

서브프로토콜로 자주 쓰이는게 STOMP이다

 

다음에는 STOMP에 대해서 알아보자..!

 

 

참고글 

https://doozi0316.tistory.com/entry/WebSocket%EC%9D%B4%EB%9E%80-%EA%B0%9C%EB%85%90%EA%B3%BC-%EB%8F%99%EC%9E%91-%EA%B3%BC%EC%A0%95-socketio-Polling-Streaming

WebSocket이란? 개념과 동작 과정 (+socket.io, Polling, Streaming...)

https://yong-nyong.tistory.com/90