react, SpringBoot WebSocket 연결하기 (1/5)

react

react, SpringBoot WebSocket 연결하기 (1/5)

개발메모장 2023. 12. 26. 17:00

프로젝트 진행하면서 웹소켓 필요성을 느껴 도입을 시도

React

1. Stomp

2. SockJS

Spring Boot

1. WebSocketMessageBrokerConfigurer

2. SimpMessagingTemplate

이 구성으로 웹소켓을 도입

웹소켓 설명

새로고침없이 실시간으로 최신화된 데이터를 송수신 할 수 있다.

예를 들어 채팅, 알람 등등에 대표적으로 사용

작동 방식

구독이라는 개념을 우선 알아가야한다.

웹소켓 연결시 구독주소를 설정하면 웹소켓에 연결된 사람들은 해당 구독주소로 실시간으로 최신화된 데이터를 송수신할 수 있다.

채팅으로 예시를 들어보자

구독주소는 우리가 흔히 알고는 방식이다 채팅구독주소: "/topic/greetings " GetMapping, PostMapping 주소랑 비슷하다고 보면된다.

그럼 채팅을 보낼때 입력버튼에 /topic/greeting 으로 전송하면 웹소켓 연결시 해당 주소로 구독된 모든 클라이언트들에게 데이터가 서버를 거치지 않고 바로 넘어간다.

그래서 구독은 어떻게 웹소켓 연결시 설정하는데 ?

채팅을 예시로 보면 Stomp 라이브러리를 활용해 구독 주소("/topic/greetings") 와

구독 주소로 왔을때 받을 데이터를 어떤 state에 담을건지 미리 설정해둔다.

이런식으로 개발자가 구독 주소와 state를 설정해둔다.

그럼 서버로 요청이 안가는거야 ?

놉! 서버로 요청이 갔다가 클라이언트들(구독자)에게 갈지,

서버에 요청없이 다이렉트로 클라이언트들(구독자)들에게 갈지 개발자가 설정할 수 있다.

그림설명을 해보자면

우선 데이터를 보냈을 때 선택지가 주어진다.

1. 서버로 보낼 건지 - /app

2. 서버로 안보내고 바로 클라이언트 들에게 보낼건지 - /topic

서버로 보낸 경우 - /app

서버로 보내면 또 선택지가 두 개 주어진다.

1. 데이터 가공 후 특정 클라이언트 에게 보낼지 - /queue

2. 데이터 가공 후 모든 클라이언트 에게 보낼지 - /topic

총 정리

우선 개발자 본인이 서버로 보낼건지 안보낼 건지 선택 후

특정 누군가에게만 보낼건지 모든 사람에게 보낼건지 결정해서 처리하면된다.

혹은 요청이 들어온 경우 어떤 데이터는 특정 누군가, 다른 데이터는 모든 사람에게 보내는것도 가능하다.

/app , /topic, /queue 예시)

/topic

채팅 같은경우는 가공없이 바로 채팅입력된 데이터를 보내주면 되기에 서버에 거치지 않고 /topic으로 바로 보내면 된다.

/app, /queue

알람 같은 경우 DB를 거쳐야 하기 때문에 /app 으로 서버에 먼저 요청 보내서 데이터 가공 하고

특정 누군가에게만 알람이 가야하기 때문에 /topic이 아닌 /queu로 처리해서 응답한다.