실시간 채팅구현(1) - 서버에 따른 통신 도구 설정

 

이번 WEB IDE 프로젝트에서 실시간 채팅 구현! 을 맡게되었다.

예전부터 구현해보고싶었던 기능인데 좋은 기회🎶 즐겁다.

 

우선, 어떻게 구현 해야할지 감이 안와서 검색을 해보았다.

 

보통 사람들이 사용하는것을 보면 socket.io, stomp, websoket 등등.. 이 있던데

대체 뭐가 다른건지, 프론트는 뭘 해야하는건지.. 뭘 사용해야 적합한지 알아보다 마침내 결론내렸다.

 

백엔드를 무엇으로 구현하였냐!

에 따라 달라지는것같다.

---

우선, 채팅은 소켓을 기반으로 실시간 통신을 한다.

이걸 어떤 방식으로 구현을 할지는 서버가 Node.js냐,Spring이냐에 따라 적합한 도구가 달라진다.

이런 그림으로 이해하면 되겠다.

 

실시간 통신은 WebSoket이 담당하고, STOMP, Socket.io, Sockjs가 도와주는 방식이다.

 

여기서 Soket.io는 Websoket과 비슷하게 동작하나, 자체 프로토콜을 가진 라이브러리다.

Node.js를 기반으로 한 서버 환경에 적합하다.

프로토콜 자체가 Websoket과 비슷하나 서로 호환되지 않는다고 하며,

스프링 부트와는 잘 맞지 않는다고 한다.

 

STOMP는 WebSocket 위에서 동작하는 메세지 프로토콜이며,

Spring Boot 환경에서 주로 사용한다. 웹 소켓을 효율적으로 사용하기 위해서는 거의 필수라고 볼 수 있다.

Sockjs는 선택적으로 사용한다. WebSocket이 지원되지 않는 환경에서 Fallback용으로 사용하기에,

방화벽으로 차단되어있는 환경을 고려할 경우에 사용하면 좋다.

이것 또한 Spring Boot 환경에서 주로 사용한다.

 

그러니까 정리를 하자면,

Soket.io -> Node.js

STOMP -> Spring boot

여기서 더불어 sockjs도 사용하고싶다 하면

STOMP + SockJs-> Spring boot

가 되는것이다.

 

우리는 개발 환경이 스프링부트이므로, STOMP는 필수적으로 사용하고,
채팅 구현 담당 백엔드 팀원과 상의해서 SockJs까지 함께 사용하기로 하였다.

 

따라서 프론트엔드에서도 서버의 개발 환경에 따라

npm install @stomp/stompjs sockjs-client

 

이걸 설치해줘야한다.

 

그러면 기본 세팅 완료 :-)