웹소켓(Web Socket)

- HTTP의 비연결성(Connectionless)

HTTP 통신은 클라이언트가 서버에 요청(request)을 해서 응답(response)을 받으면 tcp/ip 요청을 끊어 연결을 해제한다. 이것이 http의 특징인 비연결성이다. 비연결성은 서버의 자원을 효율적으로 사용할 수 있다는 장점이 있지만, 양방향 통신을 하기 어렵다는 단점이 있다. 서버는 클라이언트의 요청에 응답하는 것 뿐, 주체적으로 데이터를 보낼 수 없기 때문이다.

 

 

- HTTP로 구현한 양방향 통신

그래서 양방향 통신이 필요할 땐, HTTP로 얼추 양방향 통신이 되게 만들었다.

• 폴링(Polling)
  • 주기적으로 http 요청을 보내 데이터를 받아와 데이터를 갱신하는 방법이다.
  • 갱신할 데이터가 없어도 클라이언트에서 계속 요청을 보내니 비효율적이고 주기가 존재하는 이상 실시간일 수 없다.
• 롱폴링(Long Polling)
  • 폴링을 개선한 방법이다.
  • 클라이언트가 요청을 보낸 뒤, 서버는 응답할 데이터가 생길때까지 기다리다가 응답한다. 브라우저는 응답을 받으면 바로 다시 요청을 보낸다. 폴링을 보완했지만, 갱신할 데이터가 자주 있을 경우 폴링과 같아진다.
  • 보낼 응답 생길 때까지 무한루프

그 외에 Streaming, Server-Sent Events 등이 있지만 HTTP로 구현한 이상 근본적인 문제점이 있다.

매 HTTP 통신마다 번거로운 핸드쉐이킹 과정이 필요하고 간단한 메시지를 보내려해도 무거운 Header도 같이 보내져서 양방향 통신을 하기엔 비효율 적이다.

 

이런 맥락에서 HTML5의 새로운 스펙 중 하나로써 웹소켓(Web Socket)이 등장한다.

 

 

- 웹소켓(Web Socket)

IETF가 rfc6465에서 정의한 양방향 통신을 제공하는 프로토콜이다.

RFC 6455 - The WebSocket Protocol

 

웹소켓은 HTTP 통신으로 핸드쉐이킹한다.

아래는 클라이언트에서 보내는 핸드쉐이크다.

   The handshake from the client looks as follows:

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

웹소켓 핸드쉐이크에는 GET 메소드를 사용해야 하며 Upgrade 헤더엔 websocket, Connection 헤더엔 Upgrade가 들어가야 한다.  Connection: Upgrade의 의미는 클라이언트가 프로토콜을 바꾸고 싶다는 것을 의미하고, Upgrade: websocket은 바꾸고 싶은 프로토콜이 websocket이라는 것을 의미한다.

위의 핸드쉐이크를 받으면 서버는 아래의 내용을 핸드쉐이크로 보내준다.

   The handshake from the server looks as follows:

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

핸드쉐이크가 성공적으로 끝나면 프로토콜이 http에서 ws, https에서 wss로 바뀐다. 웹소켓은 http 통신과 같은 포트를 사용한다.

 

ws가 주고받는 데이터를 메시지라고 한다. 메시지는 여러개의 프레임(frame)으로 구성되어 있다. 하나의 메시지를 여러개의 프레임으로 쪼개서 보내는 것이다. 프레임은 헤더와 페이로드로 나뉜다.

 

웹소켓 프레임 헤더: HTTP에 비해 가볍다.

웹소켓 헤더, 프레임 분석 (websocket header, frame)

웹소켓 프레임 페이로드: 텍스트나 이진 데이터만 전송 가능하다.

 

웹소켓은 HTTP로 구현한 양방향 통신에 비해 한번의 tcp/ip 통신으로 이루어지므로 훨씬 효율인 양방향 통신을 가능하게 한다. 그러나 통신을 유지해야 해서 비용이 더 들고 HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다.

-> Socket.io는 HTML5에서는 웹소켓을 사용하고 그 이하에서는 위에서 설명한 기술(폴링, 롱폴링 등)을 사용해 단점을 보안해준다.

Socket.IO

 

웹소켓은 실시간 통신이 필요한 중계, 채팅, 주식, 구글닥스 등에서 사용된다.

개발자도구를 통해 업비트 사이트에서 사용하는 웹소켓을 봐보자.

업비트의 Web Socket의 핸드쉐이킹

업비트 웹소켓의 Message

- 더 공부할 만한 것

• 네트워크
  • 웹소켓과 http 모두 osi 모델 7계층에 위치하고, 4계층의 tcp에 의존한다고 한다
  • 웹소켓은 http 포트 80과 443위에 동작하도록 설계되었다.
  • 네트워크를 한번 제대로 깊게 파봐야할 것 같다. osi 모델, tcp/ip 등등
  • 인터넷 통신과정을 더 깊게 공부하자. (집에서 미국의 사이트에 접속하는 과정 등, 로우하게)

 

- 그 외

공부를 하다 뜨끔하게 하는 글을 만났다.

https://stackoverflow.com/questions/26791107/ws-on-http-vs-wss-on-https

Read RFC 6455 (The WebSocket Protocol) to reach the right answer.  To become a true engineer, don't avoid reading RFCs. Only searching technical blogs and StackOverflow for answers will never bring you to the right place.

그동안 공식문서를 진득하게 잘 안봤던 것 같아서, 돌아보게 됐다ㅎㅎ