이노베이션 캠프 실전 (챕터1. 채팅-Socket.io, SockJS, stomp)

yesolog·2022년 10월 27일
1

TIL,WIL

목록 보기
4/6
post-thumbnail
스파르타 코딩클럽 이노베이션 캠프에 참가하면서 최종 실전프로젝트로 캠스터디를 구현하기로 했다.
이 아이디어는 내가 낸 것인데... 사실 어느정도 빡셀것이라고 예상했던 주제이다..
다행히 팀원들을 너무 잘 만나서 팀원 모두 개같이 망하더라도 실전다운 프로젝트를 만들어보자는 공통된 의지를 바탕으로 진행하게되었다.

여기서 내가 담당한 기능은 채팅이다..
사실 이전까지 한번도 채팅을 구현해본 적이 없어서 내가 할 수 있을까...? 라는 생각으로 시작했다..
근데 뭐 어떡해... 먼저 나서서 제일 어려울것 같은 화상연결을 담당하신 프엔 팀장님도 계시는데 나도 해내야지ㅎㅎ 이때부터는 그냥 무조건 해낸다는 생각하나만으로 임했다...ㅋㅋㅋㅋ

일단 채팅기능을 구현하기 알아보았을때 websocket이라는게 있다고 들었다. websocket이 무엇인고...

1. websocket

websocket: 웹 소켓은 사용자의 브라우저와 서버 사이의 인터랙티브한 통신 세션을 설정할 수 있게 하는 기술. 개발자는 웹 소켓 API를 통해 서버로 메세지를 보내고 서버의응답을 위해 서버를 풀링하지 않고도 이벤트 중심 응답을 받는 것이 가능.

여기까지가 MDN의 정의... 나는 이걸 이해할 때 양방향 통신을 가능하게 해주는 일종의 복도라고 생각했다. 이후에 등장하는 SockJS와 stomp에서 등장할 개념인 subscribe(구독)가 이루어지는 방을 들어가기 위한 호텔의 복도랄까...? 채팅방은 하나의 subscribe로 볼 수 있을것이고!

그런데 이런 websocket에게도 몇가지 문제가 있다.

1. 모든 클리이언트 브라우저에서 지원한다는 보장이 없다.

2. sever/client중간에 위치한 proxy가 upgrade헤더를 해석하지 못해 서버에 전달하지 못할 수 있다.

3. server/client 중간에 위치한 proxy가 유휴상태에서 도중에 커넥션을 종료할 수 있다.

이러한 문제를 해결하기 위해서 보통 sockJS와 Socket.io를 사용한다. 이 두 기술의 특징은 웹페이지가 열리는 브라우저가 websocket을 지원하면 일반 webSocket방식으로 동작하고 지원하지 않는 브라우저라면 일반 http스펙을 이용해서 실시간 통신을 흉내낼 수 있는 방식으로 통신하게 해주는 것이다.

그렇다면 sockJS와 Socket.io는 어떤 경우에 사용하는 것일까? 두개가 동일한 기술인것 아닌가? 결론은 아니다. 나는 간단하게 두가지 기술은 크게 서버가 spring을 사용하는지 node.js를 사용하는지에 따라 나뉜다고 결론 내렸다.

2. SockJS

SockJS: SockJS는 WebSocket과 유사한 객체를 제공하는 브라우저 JavaScript 라이브러리입니다. SockJS는 브라우저와 웹 서버 사이에 대기 시간이 짧은 전이중 도메인 간 통신 채널을 생성하는 일관된 브라우저 간 Javascript API를 제공합니다.

내부적으로 SockJS는 기본 WebSocket을 먼저 사용하려고 시도합니다. 이것이 실패하면 다양한 브라우저별 전송 프로토콜을 사용하여 WebSocket과 같은 추상화를 통해 제공할 수 있습니다.

SockJS는 모든 최신 브라우저와 WebSocket 프로토콜을 지원하지 않는 환경(예: 제한적인 기업 프록시 뒤에서)에서 작동하도록 만들어졌습니다.

결론적으로 우리팀은 SockJS를 사용했다. 백엔드가 spring기반이기 때문에 socket.io는 사용하지 않았다. 보통 SockJSstomp라고 하는 메세지 프로토콜과 함께 사용된다.

3. Socket.io

Socket.io:Socket.IO는 클라이언트와 서버 간의 짧은 대기 시간 , 양방향 및 이벤트 기반 통신 을 가능하게 하는 라이브러리입니다. WebSocket 프로토콜 위에 구축되었으며 HTTP 긴 폴링 또는 자동 재연결에 대한 폴백과 같은 추가 보장을 제공합니다

우리팀은 해당 라이브러리대신 SockJS를 사용해서 socket.io에 대해서는 node.js기반의 웹소켓 emulation이라는 정도만 알고 지나간다.

4. Stomp

Stomp:STOMP (Simple Text Oriented Messaging Protocol)은 메세징 전송을 효율적으로 하기 위해 탄생한 프로토콜. STOMP 프로토콜은 WebSocket 위에서 동작하는 프로토콜로써 클라이언트와 서버가 전송할 메세지의 유형, 형식, 내용들을 정의하는 매커니즘이다.

stomp를 사용하면 메세징 프로토콜이나 형식을 개발할 필요가 없다. 개발자 입장에서는 정말이지 사용하기 좋은 메세지 프로토콜이다. 내가 사용했을 때 기준으로 대표적인 명령어로는 subscribe와 publish가 있다. subscribe라는 명령어를 통해 방을 구독하여 메세지를 받아볼 수 있고 해당 방에서 publish하면 메세지를 보낼 수 있다.

사실 해당 라이브러리들에 대해 정리하자면 정말 내용이 많다... 일단 나는 내가 진행한 프로젝트를 간단하게 정리하는 중이니 여기에서 멈추도록 하겠다.

참고자료:
https://dev-gorany.tistory.com/235
https://socket.io/docs/v4/
https://github.com/sockjs/sockjs-client

0개의 댓글