WebSocket 기본

웹소켓이란?

 - 두 프로그램 사이에서 메세지( 텍스트와 바이너리 ) 를 주고 받기 위한 통신 방법중 하나

 

특징

 - 양방향 통신이다. 데이터 송수신을 동시에 처리할 수 있다.

 - 클라이언트와 서버가 각각 서로 원할 때 송신을 할 수 있다.

     tip ) HTTP 통신은 클라이언트가 요청을 보낼 때만 서버가 응답해주는 단방향 통신이었다.

 - 실시간 네트워킹 : 웹환경에서 연속된 데이터를 빠르게 노출 시켜야 할 떄 ( 채팅, 주식, 데이터 )

 - HTTP 핸드쉐이킹을 하기 떄문에 HTTP 헤더를 사용한다. 그리고 기존 포트 ( 80 / 443) 을 사용한다.

 

 

비슷한 기술

 Polling : 서버로 일정 주기로 request 송신하는 기술

        Realtime 통신에서 폴링을 쓴다면, 언제 통신이 발생할지 모르니 주기적으로 계속 요청을 보내게 되는데,

        이는 불필요한 리소스 ( request, connection) 을 발생한다.

 LongPolling :  요청을 보낸것이 서버에서 일정시간 대기하면서 이벤트를 기다린다.

 Streaming :  서버에서 클라이언트로 연속적인 데이터송신 

         이는 클라이언트에서 서버로의 데이터 송신이 어려워진다.

 

동작방법

핸드쉐이킹이 필요하다 - 얘는 HTTP 나 HTTPS 를 통해서 이루어진다.

이때 , 요청헤더에는

  1. Upgrage : WebSocket 

  2. Security WebSocket Key - 이를 이용해서 서로 신원을 확인한다. 

  3. Origin : 클라이언트 주소

 

그리고, 웹소켓이 연결되면 응답헤더에는

   1. 101 Switching Protocols가 응답이 온다. 

   2.  Security WebSocket Key Accept  가 응답이 온다.  이놈이 클라이언트가 계산한 값과 다르면 수락해주지 않는다.

 

이제 데이터를 주고받는다.

 프로토콜이 WS, WSS 로 변경된다.

 이렇게 데이터를 전송하고 주고받는데,  Message ( Frame + Frame + Frame ...) 라는 단위를 사용한다.

 

클로즈 프레임을 보내며 종료한다.

 

 

 

 

 

 

 

 

Frame 에 대해서

  

   frame 은 작은헤더 + payload로  UTF8인코딩 되어 구성되어 있다.

 

   크기가 작은 헤더는 다음과 같이 구성되어 있다.

    마무리는 Close 프레임을 보내며 마무리!

 

 

필수 라이브러리

 1. HTML5 에서는 그냥 사용 / 그 이전 버전에서는 Sock.Io , Sock JS 사용

 2. STOMP

   - 웹소켓은 형식이 자유롭기 떄문에, 서브 프로토콜이 더 필요했다. 그래서 채팅통신을 위한 프로토콜을 하나 만들었다.

   - CONNECT / SEND / SUBSCRIBE / DISCONNECT  +  Header + Body 형태의 프레임을 사용하게 된다.