웹소켓 이란?
기본적으로 클라이언트와 서버의 관계는 stateless 하게 이루어져 있다.
즉 클라이언트에서 Request 를 날리면 서버에서 Response 하는 과정으로 이루어져있다.
그런데 웹소켓은 Statefull protocol 이다.
즉 요청을 매번 보내지 않고 connection 상태를 유지해서 양방향 통신 또는 데이터 전송이 가능하도록 하는 기술이다.
쉽게 말해서 요청을 보내지 않아도 응답을 받을 수 있다. 정도로 생각하면 될 것 같다.
웹소켓은 handShake과정을 통해 Client와 Server 접속을 유지한다.
웹소켓이 기존의 일반 TCP소켓과 다른점은 최초접속이 일반 http request를 통해 handshaking과정을 통해 이루어진다는 점이다.
Client에서 랜덤하게 생성된 키값을 전송하고, Server는 이 키값을 바탕으로 토큰을 생성하여 Client에 Response를 보내어 Client와 Server간의 handShaking이 이루어 진다.
soket.io
인터넷 익스플로러 구버전의 사용자는 webcoket으로 작성된 웹페이지를 볼 수 없다. 이를 해결하기위해 soket.io는 웹페이지가 열리는 브라우저가 websoket을 지원하면 일반 websoket방식으로 동작하고 지원하지 않는 브라우저라면 http를 이용해 websoket을 흉내내는 방식으로 통신을 지원한다. soket.io는 nodeJS에 종속적 이다.
soket.js
스프링에서 위와 같은 브라우저 문제를 해결하기 위한 방법으로 soketJS를 솔루션으로 제공한다. 서버 개발시 일반 websoket으로 통신할지 SoketJS 호환으로 통신할지 결정할 수 있다. 그리고 클라이언트는 SoketJS client를 통해 서버랑 통신한다.
stomp
stomp는 단순 (또는 스트리밍) 텍스트 지향 메시징 프로토콜이다. spring에 종속적이며, 구독방식으로 사용하고 있다. 가벼워서 보통 많이들 사용한다.
보통 Node.js 를 이용할땐 soket.io 를 주로 사용하고,
Spring을 사용할땐 soket.js, stomp 를 주로 사용한다.
이번 프로젝트의 백엔드 서버는 Spring 이니 soket.js와 stomp로 통신을 하려고 한다.
// npm Install
npm install sockjs-client, @stomp/stompjs --save
// yarn Install
yarn add @stomp/stompjs sockjs-client공식문서에 npm으로 install하는 방법이 나와있지 않은건지 내가 못찾은건지 모르겠는데 결국 npm 에 직접 검색 해서 찾았다.
- stomp 공식문서 https://stomp-js.github.io/ git https://github.com/stomp-js
- sockjs git npm https://www.npmjs.com/package/sockjs-client
오늘은 웹소켓에 대해 조금 더 공부를 하고 내일 적용해봐야겠다.
