[WebSocket] WebSocket이란 무엇일까?

WebSocket이란 무엇일까?

WebSocket이란 무엇일까? 

위키백과에 의하면

웹소켓(WebSocket)은 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜이다.

웹소켓은 HTTP와 구별된다. 두 프로토콜 모두 OSI 모델의 제7계층에 위치해 있으며 제4계층의 TCP에 의존한다. 이들에 차이가 있으나 "RFC 6455"에 따르면 웹소켓은 HTTP 포트 80과 443 위에 동작하도록 설계되었으며 HTTP 프록시 및 중간 층을 지원하도록 설계되었으므로 HTTP 프로토콜과 호환이 된다. 호환을 달성하기 위해 웹소켓 핸드셰이크는 HTTP 업그레이드 헤더를 사용하여 HTTP 프로토콜에서 웹소켓 프로토콜로 변경한다.

라고 나와있다.

 

즉, 응용계층의 HTTP / HTTPS 프로토콜 위에서 동작하고, 전송 계층에 있는 TCP 연결(양방향 전이중 통신)을 유지해주게 됨으로써 실시간으로 데이터를 주고받을 수 있도록 해주는 프로토콜 이라는건데

 

하나의 TCP 접속에 전이중 통신 채널을 제공하는게 뭘까??
일단 Websocket이 왜 생겨났는지 부터 파악해보자

 

WebSocket의 기원

결론적으로는 서버와의 실시간 데이터 전송을 용이케 하려고 생겨났다. 

 

2008년 6월, 일련의 토론이 마이클 카터(Michael Carter)에 의해 주도되었으며, 웹소켓으로 알려진 최초 버전의 프로토콜이 탄생되었다.

 

인터넷이 나오고 HTTP를 통해서 서버로부터 데이터를 가져오게 되어서 화면의 내용을 갱신할 수 있었다. 그치만 여기서 단점은 전체를 다 변경해야하는 단점이 존해서 AJAX가 나오게 되는데,

AJAX는 html 페이지 전체가 아닌 일부분만 갱신할수 있도록 XMLHttpRequest객체를 통해 서버에 request 한다.

XMLHttpRequest는 서버와의 연결을 잡아두고, Json이나 xml형태로 필요한 데이터만 주고 받으며 DOM을 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있게 된다. 

 

하지만 기존의 Ajax(Asynchronous Java Script+XML)의 핵심 기술인 XML Http Request는 어디까지나 브라우저 측에서 서버로 데이터 전송 요청을 담당하는 수단이기 때문에, 서버 측에서 클라이언트 브라우저로 데이터를 푸시하는 것이 어려웠고,

이는 서버와 클라이언트 간의 데이터 교환이 빈번한 Ajax 애플리케이션을 지원하는 데 한계가 되었다. 또한 Comet 기술의 경우 서버 측에서 푸시가 가능하지만 양방향 통신을 위해 통신이 필요할 때마다 통신 설정 절차(TCP handshaking)를 다시 재설정해야 한다는 문제가 있었다

웹 소켓은 서버와 클라이언트가 HTTP를 이용해 한 번 연결한 후에는 필요한 통신 모두를 그 연결상에서 웹 소켓 전용 프로토콜을 기반으로 수행할 수 있다.

접속 시간을 장시간 유지할 수 있고, HTTP와 달리 경량 프로토콜을 사용하기 때문에 통신 손실이 적다.

또한 하나의 연결로 모든 데이터 송수신이 가능하므로 동일한 서버에 연결한 다른 응용 프로그램에 의한 영향이 적다는 장점이 있다.

 

위 와 같은 이유로 WebSocket은 나오게 되었는데 그럼 어떻게 동작하는지 알아보자

WebSocket 동작과정

https://ko.wikipedia.org/wiki/%EC%9B%B9%EC%86%8C%EC%BC%93

위 그림에서와 같이 크게 3가지 동작으로 동작하게 되는데

 

1. 연결수립 : Handshake (HTTP Upgrade) - [ Client -> Server ] 
최초 연결 요청 시 클라이언트에서 HTTP 1.1 프로토콜을 통해서 서버에 핸드셰이크 요청을 한다. 
아래는 요청과 응답의 예시 입니다.
- 클라이언트 응답 : 

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

헤더 이름	구분	설명
GET	필수	요청명령어는 GET을 사용해야 하며, HTTP버전은 1.1이상 이어야 합니다.  예) GET / HTTP/1.1
Host	필수	웹소켓 서버의 주소 입니다.
Upgrade	필수	websocket이라는 단어를 사용해야 합니다. 대, 소문자는 구분하지 않습니다.
Connection	필수	Upgrade라는 단어를 사용해야 합니다. 대, 소문자는 구분하지 않습니다.
Sec-WebSocket-Key	필수	길이가 16바이트인 임의로 선택된 숫자를 base64로 인코딩 한 값입니다.
Origin	필수	클라이언트로 웹 브라우저를 사용하는 경우에 필수항목으로, 클라이언트의 주소 입니다.
Sec-WebSocket-Version	필수	13을 사용합니다.
Sec-WebSocket-Protocol	옵션	클라이언트가 사용하고싶은 하위 프로토콜 이름을 명시합니다.
Sec-WebSocket-Extensions	옵션	클라이언트가 사용하고 싶은 추가 옵션을 기술합니다.

- 서버 응답 : 

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

헤더 이름	구분	설명
HTTP	필수	HTTP버전은 1.1이며, 클라이언트로부터의 요청이 이상 없는 경우 101을 상태코드로 사용합니다.  예) HTTP/1.1 101
Upgrade	필수	websocket이라는 단어를 사용해야 합니다. 대, 소문자는 구분하지 않습니다.
Connection	필수	Upgrade라는 단어를 사용해야 합니다. 대, 소문자는 구분하지 않습니다.
Sec-WebSocket-Accept	필수	클라이언트로부터 받은 Sec-WebSocket-Key를 사용하여 계산된 값입니다.
Sec-WebSocket-Protocol	옵션	서버에서 서비스하는 하위 프로토콜을 명시합니다. 클라이언트가 요청하지 않는 하위 프로토콜을 명시하면 핸드쉐이크는 실패하게 됩니다.
Sec-WebSocket-Extensions	옵션	서버가 사용하는 추가 옵션을 기술합니다. 클라이언트가 요청하지 않는 추가 옵션을 명시하면 핸드쉐이크는 실패하게 됩니다.

위의 예와 같이 웹소켓 연결을 했을 때는 101으로 응답받는 것을 확인 할 수 있다. 

Handshake 과정을 통해 연결이 수립되면 응용 프로그램 계층 프로토콜이 HTTP에서 웹 소켓으로 업그레이드가 된다.

 

2. 전이중통신 : Bidireactional messages (open and persistent connection)

연결이 수립되면 클라이언트와 서버 양측간의 데이터 통신 단계가 시작되고,

서로는 메세지를 보내며 통신하는데, 이 메세지는 프레임(Frame) 단위로 이루어진다.

 

3. 연결종료 : One Sides closes channel (Connection Closed)

클라이언트 혹은 서버 양측 누구나 연결을 종료할 수 있다. 연결 종료를 원하는 측이 Close Frame 을 상대쪽으로 전송하면 된다

 

---

참고링크

https://terms.naver.com/entry.naver?docId=3440552&cid=40942&categoryId=32851 

웹소켓

https://ko.wikipedia.org/wiki/%EC%9B%B9%EC%86%8C%EC%BC%93

웹소켓 - 위키백과, 우리 모두의 백과사전

https://datatracker.ietf.org/doc/html/rfc6455

RFC 6455: The WebSocket Protocol

https://hudi.blog/websocket-with-nodejs/

채팅서비스를 구현하며 배워보는 Websocket 원리 (feat. node.js)

https://blog.naver.com/eztcpcom/220040171267

HTML5 웹소켓(WebSocket) 접속 과정.