네트워크 및 통신

웹 소켓(Web Socket) 소개

char1ey 2023. 1. 26. 17:35
목차
1. 웹 소켓(Web Socket) 소개
2. 롱 폴링(Long Polling)
3. 웹 소켓 연결방식
4. 웹 소켓 데이터 전송

1. 웹 소켓(Web Socket) 소개

 

 

기존의 HTTP 프로토콜의 특징은 비연결성이며, 양방향 통신이 불가능했다.

연결이 이루어지고, 요청과 응답을 주고 받은 후 연결을 끊었기 때문이다.

어느 측면에서는 좋은 점도 있겠지만, 좀 더 다양한 서비스를 만들기 위해서는 부적합한 면이 존재했다.

 

기존 HTTP 방식의 다양성을 위해서 웹 소켓이라는 것이 생겨났다.

 

웹소켓(Web Socket)을 이용하면 서버와 브라우저가 연결을 유지한채로 데이터를 교환할 수 있다.

HTTP 프로토콜과의 가장 큰 차이점은 연결유지(연결성)와 양방향 통신이 가능하다는 점이다. 

 

연결이 유지되고 양방향 통신이 가능해지면서 실시간 채팅, 실시간 검색어, 주식 트레이딩 시스템과 같이 데이터 교환을 지속적으로 해야하는 상황을 해결할 수 있게 되었다.

 

또한 웹 소켓은 프로토콜이며, ws라는 특수 프로토콜을 사용하기도 한다.

 

특징을 정리해보자면 다음과 같다.

 

  • 웹 소켓은 양방향 통신이 가능하다
  • http프로토콜과 달리 연결이 유지된다.
  • ws라는 특수 프로토콜을 사용한다.

 

2. 롱 폴링(Long polling)

 

웹소켓을 사용하지 않고도 서버와 지속적인 연결을 유지할 수 있었는데, 이를 롱 폴링 방식이라고 한다.

 

방법은 다음과 같다.

 

  1. 서버에 요청 메시지를 보낸다.
  2. 요청 메시지를 받은 서버는 보낼 메시지가 생길때까지 기다린다.
  3. 보낼 메시지(데이터)가 생기면 클라이언트에게 응답을 준다.
  4. 응답을 받은 클라이언트는 바로 요청 메시지를 만들어 보낸다.

 

<그림 1> 롱 폴링(Long Pollig) 방식

 

 

위와 같은 방식으로도 실시간 채팅처럼 구현할 수는 있었지만,

사용자가 늘어남에 따라 서버에 과부하가 걸리게되어 제한사항이 있었다.

3. 웹 소켓 연결방식

 

 

웹 소켓의 연결방식 또한 TCP 통신과 마찬가지로 hand shake방식으로 연결한다.

다만, 차이점이 있다면 TCP 통신은 OSI 4계층이지만 웹 소켓은 OSI 7계층에서 일어난다는 점이다.

 

<그림 2> 웹소켓 핸드셰이크

 

웹 소켓 요청메시지(클라이언트 측)

 

GET /websocket HTTP/1.1
Host: localhost
Origin: http://localhost:3000
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-key: Iv8io/9s+lYFgZWcXczP8Q==
Sec-WebSocket-Version: 10

 

<그림 2>에서의 http 요청 부분의 요청메시지 헤더를 하나씩 살펴보자.

 

Origin은 어떤 클라이언트인지를 나타낸다. 서버는 Origin 헤더를 보고 어떤 웹사이트와 소켓통신을 할지 결정한다.
Connection: Upgrade 는 클라이언트 측에서 프로토콜을 바꾸고 싶다고 요청하는 것이다.
Upgrade: websocket 은 클라이언트 측에서 요청한 프로토콜은 'websocket'이라는걸 의미한다.
Sec-WebSocket-Key 는 보안을 위해 브라우저에서 생성한 키로,서버가 웹소켓 프로토콜을 지원하는지를 확인하는데 사용된다.

 

 

웹 소켓 응답메시지(서버 측)

 

101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g=

 

<그림 2>에서의 http 응답 부분의 응답메시지이다.

 

서버는 클라이언트 측에서 보낸 웹소켓 통신 요청을 최초로 받고 이에 동의하면,

상태 코드 101이 담긴 응답을 클라이언트에 전송한다.

 

Sec-WebSocket-Accept 는 알고리즘을 사용해서 만든 Sec-WebSocket-Key 다.
이 값을 이용해서 브라우저는 서버가 진짜 웹소켓 프로토콜을 지원하는지 확인한다.

 

 

 

4. 웹 소켓 데이터 전송

 

 

웹소켓 통신은 프레임(frame) 이라 불리는 데이터 조각을 사용해 이루어진다.

프레임(frame) 은 서버, 클라이언트 양측 모두에서 보낼 수 있고, 담긴 데이터 종류에 따라 분류가 가능하다.

 

프레임(Frame) 역할
텍스트 프레임(Text Frame) 텍스트 데이터가 담긴 프레임
이진 데이터 프레임(Binary Data Frame) 이진 데이터가 담긴 프레임
핑-퐁 프레임(Ping-Pong Frame) 커넥션이 유지되고 있는지 확인할 때 사용하는 프레임
(서버나 브라우저가 자동으로 생성)

 

브라우저 환경에서 개발자는 텍스트, 이진 데이터 두 가지 프레임만 다루게 된다.

웹소켓 데이터를 보낼 때 (send 메서드) 이진 데이터, 텍스트만 보낼 수 있기 때문이다.

 

나중에 보게될 socket.send( data ) 를 이용해서 데이터를 보내는데, 여기에는 텍스트나 이진 데이터만 들어간다.

데이터에 따라 세팅을 해 줄 필요는 없고, 텍스트나 이진 데이터를 넣으면 알아서 데이터가 전송된다.

 

반대로 데이터를 받을 경우에도 마찬가지로 텍스트나 이진 데이터로 오는데,

텍스트 데이터는 항상 문자열 형태로 오고,

이진 데이터는 Blob이나 ArrayBuffer 포맷 둘 중 하나를 고를 수 있다.

기본값은 Blob 이기 떄문에 Blob 객체 형태로 전송 받는다. ( Blob 은 고차원 이진 객체이다. )

 

 

 

 

다음번에는 웹 소켓을 Javascript 환경과 NodeJs 환경에서 각각 사용해 보도록하자.

참고자료
https://ko.javascript.info/long-polling
https://ko.javascript.info/websocket#ref-1898

 

저작자표시