spurdev

Websocket, 웹소켓? 웹소켓은 하나의 TCP 접속에 전이중 통신 채널을 제공하는 통신 프로토콜이다. 클라이언트 애플리케이션과 웹 서버간의 통신을 가능케 하며, 서버와의 실시간 데이터 전송을 용이케 한다. 등장 배경 웹 환경에서 통신이라면 가장 먼저 떠오르는것은? 바로 HTTP이다. 90년대 처음 등장한 이후로 HTTP는 웹 환경에서는 뗄수 없는 존재가 되었다. 하지만 HTTP는 클라이언트가 요청을 보내고 응답을 받으면 연결을 끊는 방식이기 때문에 서버가 변경 사항이 발생했을때 클라이언트에 변경사항을 알릴 방법이 없어 실시간 서비스에 적합하지 않다. 물론, Polling과 Long Polling이라는 개념(주기적으로 클라이언트가 요청을 보내 변경사항을 가져오는 것)이 존재하지만 잦은 요청은 불필요한..

기술 스택 클라이언트를 만들때 사용할수 있는 기술 스택은 React, Vue, JSP 등이 있다. 대부분 websocket을 지원하기때문에 사용하기 편한것을 선택하면 된다. 나는 사용해본 경험이 있기에 익숙한 React를 선택했다. 웹소켓 연결하기 React에서 웹소켓 통신을 하기위해 react-stomp라는 라이브러리를 사용했다. react 프로젝트 생성후 추가해주도록 하자. https://www.npmjs.com/package/react-stomp npm install react-stomp or yarn add react-stomp 라이브러리 설치가 끝났다면 웹소켓을 연결할 페이지를 작성할때 컴포넌트를 import하여 사용하면 된다. import React, { useRef } from 're..