Web socket

서문

Drello 프로젝트를 진행하면서 이제 다른 사람들과 실시간으로 Drello를 같이 사용할 수 있는 기능을 설계하기 위해 Django Channels란 프로젝트를 이용하기로 했다. 해당 프로젝트를 공부하면서 내가 잘 모르는 CS가 많았다. 그 중에서 하나인 Web socket에 관해 공부한 내용을 정리한 것이다.

Socket

웹 브라우저가 데이터를 전송할 때는 OS의 Socket이라는 구조를 사용한다. 웹 브라우저는 OS에 의뢰해서 Socket을 만들어 통신한다. Socket을 작성하면 Socket buffer(데이터를 한 곳에서 다른 한 곳으로 전송하는 동안 일시적으로 그 데이터를 보관하는 메모리의 영역이다)라는 상자가 만들어진다. Socket buffer에는 송신 buffer와 수신 buffer가 있으며, 웹 브라우저가 송신하는 경우에 데이터가 송신 buffer에 적재된다. 이 buffer가 차면 OS에 의해 TCP 세그먼트라는 상자로 분활되고, TCP 헤더, IP 헤더, MAC 헤더라는 편지 수신자 같은 정보를 붙여서 이더넷 프레임이라는 상자에 넣어 전송한다.

웹 소켓(Web socket)

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

 

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

특징

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

• 데이터 송수신을 동시에 처리항 수 있는 통신 방법
• 클라이언트와 서버가 서로에게 원할 때 데이터를 주고 받을 수 있다.

추가로, 통상적인 http 통신은 client가 요청을 보내는 경우에만 server가 응답하는 단방향 통신이다.

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

• 웹 환경에서 연속된 데이터를 빠르게 노출할 수 있다(ex; 채팅, 주식, 비디오 데이터)
• 여러 단말기에 빠르게 데이터를 교환가능하다.

웹 소켓 이전의 비슷한 기술

1. Polling

서버로 일정 주기로 요청을 수신한다.

 

단점

• real-time 통신에서는 언제 통신이 발생할 지 예측이 불가능하다.
• 불필요한 request와 connection을 생성한다.
• Real-Time 통신이라고 부르기 애매할 정도의 실시간성이다.

2. Long Polling

서버에 요청을 보내고 이벤트가 생겨 응답을 받을 때까지 연결을 종료하지 않는다. 응답을 받으면 끊고 다시 재요청을 한다.

 

단점

• 많은 양의 메세지가 쏟아질 경우 polling과 같다.

3. Streaming

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

 

단점

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

결과적으로 HTTP 프로토콜은 요청에 대해서만 응답을 보낼 수 있기때문에 채팅에서 계속 메시지를 받기만 하는 상황을 구현하기 힘들었다. 또한 HTTP 프로토콜은 매 요청과 응답마다 연결을 수립하고 끊는 과정을 반복해야 했기 때문에, 유사한 통신을 계속 반복해야 한다는 비효율성에 대한 문제가 있었습니다.

웹 소켓 동작 방법

위 그림은 웹소켓 핸드쉐이크와 통신을 보여주고 있습니다. 그림에서 볼 수 있듯이 핸드쉐이크는 한번의 HTTP 요청과 HTTP 응답으로 이루어집니다. 핸드쉐이크가 끝나면 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

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

2. 웹소켓 연결 요청에 대한 응답 예시

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

• 101 Switching Protocols가 Response로 오면 웹 소켓이 연결된다.
• Sec-WebSocket-Accept: 클라이언트로부터 받은 Sec-WebSocket-Key를 사용하여 계산된 값이다. 이 값이 클라이언트에서 계산한 값과 일치하지 않으면 연결이 되지 않는다.

2. 데이터 전송

서버와 클라이언트간의 웹소켓 연결은 HTTP프로토콜을 통해 이루어진다. HANDSHAKE과정이 성공적으로 끝나면 HTTP를 웹소켓 프로토콜로 바꾸는 protocol switching 과정이 진행된다. 그러면 웹소켓을 위한 새로운 소켓이 만들어지고 이소켓을 이용해 통신을한다(ws나 wss)

• 웹소켓 주소는 ws나 wss로 시작하는데 ws는 일반 웹소켓이고 wss는 SSL이적용된 웹소켓이다(Https)
• message: 여러 frame이 모여서 구성하는 하나의 논리적 메세지 단위
• frame: communication에서 가장 작은 단위의 데이터, 작은 헤더 + payload로 구성
• 웹 소켓 통신에 사용되는 데이터는 UTF8 인코딩 (ex; 0x00 <보내고 싶은 데이터> 0xff ) 형태이다.
• close frame을 주고 받으면 연결을 종료 한다.

웹 소켓 특징

• 최초 접속에서만 http 프로토콜 위에서 handshaking을 하기 때문에 http hreader를 사용한다.
• HTTP 요청을 그대로 사용하기에 기존 80(HTTP포트), 443(HTTPS)포트로 접속하므로 추가 방화벽을 열지 않아도 되고 HTTP의 규격인 CORS적용이나 인증등의 과정을 기존과 동일하게 가져갈 수 있다.
• frame으로 구성된 message라는 논리적 단위로 송 수신한다.
• message에 포함될 수 있는 교환 가능한 message는 텍스트와 바이너리 뿐이다.
• Stateful : 클라이언트와 한번 연결이 되면 계속 같은 라인 사용해 통신하기 때문에 HTTP사용시 필요없이 발생되는 HTTP와 TCP연결 트래픽을 피할 수 있다(웹소켓은 HTTP와 달리 최초 접속을 제외하고 헤더정보를 보내지 않기에 네트워크 비용측면에서 이득)

웹 소켓 한계

• HTML5 이전의 기술로 구현된 서비스에서 웹 소켓을 사용할 수 없다. (다만 Socket.io, SockJS를 사용하면 HTML5 이전의 서비스에서도 웹 소켓과 비슷하게 구현이 가능하다.) 
• 서버와 클라이언트간의 socket 연결을 하는 것 자체가 비용이 많이 든다(트래픽이 많은 서버 같은 경우 CPU부담이 될 수 있다)
• stateful한 만큼 서버와 클라이언트 연결을 계속 유지해야하고, 비정상적 연결이 끊어졌을때를 대응해야함.

출처

https://www.youtube.com/watch?v=MPQHvwPxDUw&t=615s 

http://www.kyobobook.co.kr/product/detailViewKor.laf?mallGb=KOR&ejkGb=KOR&barcode=9791190665209 

그림으로 공부하는 IT 인프라 구조 - 교보문고

https://dydtjr1128.github.io/etc/2019/09/23/polling-long-polling-streaming.html

Polling & Long Polling & Streaming - dydtjr1128's Blog

https://woowacourse.github.io/javable/post/2020-09-20-websocket/

웹소켓에 대해 알아보자

https://medium.com/@icehongssii/%EA%B9%9C%EC%B0%8D%ED%95%9C-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EB%93%A4%EC%9D%84-%EC%9C%84%ED%95%9C-%EA%B0%84%EB%8B%A8%ED%95%9C-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%83%81%EC%8B%9D-2-2-http%EB%A5%BC-%EB%84%98%EC%96%B4%EC%84%9C-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%82%B9websocket-c49125e1b5a0

깜찍한 프로그래머들을 위한 간단한 프로그래밍 상식(2–2. HTTP를 넘어서.. 실시간 네트워킹websock