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

react

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

개발메모장 2023. 12. 26. 16:30

Spring Boot에서 react에서 보낸 데이터 받고 재가공 후 보내기

react에서 /app 을 통해 서버로 보낸 데이터를 받아서 가공 후 다시 데이터를 구독 주소로 넘겨주자

여기서는 우리가 아는 일반 Spring Boot의

- Controller

- Service

- Mapper

3tier architecture로 진행된다.

1. /app 주소로 요청한거 Controller에서 받기

일반적인 Controller랑 똑같다.

똑같이 필요한 어노테이션 적용해주고 필요한 의존성을 주입한다.

2. react에서 요청한 주소를 매칭시켜준다.

/app 은 생략해서 작성

2-1. 만약 url에 있는 정보를 사용할 경우 @PathVariable 대신 @DestinationVariable로 사용하면 된다.

body로 데이터를 보내주기 때문에 @RequestBody로 body영역의 데이터를 받으면 된다.

3. 필요한 데이터 가공하기

가공이 필요한 데이터는 Service, Mapper 통해서 가공

4. SimpMessagingTemplate 통해서 각 구독 주소로 데이터 담아서 응답하기

SimpMessagingTemplate의 첫번째 파라미터는 destination(구독 주소)

두번째 파라미터는 데이터를 담는다.

특히 좋아요 유무는 본인만 알아야 하기 때문에 /queue/like + 좋아요 누른 아이디로

보내서 다른사람들은 해당 주소로 응답이 안가게 하고 본인만 받는다.

순서를 총 정리하자면

1. Spring Boot 웹소켓 Config 설정

2. React 웹소켓 연결, 구독 주소 설정

3. React에서 Spring Boot로 데이터 보내보기 (/app)

4. Spring Boot에서 데이터 받아지는지 확인하기 (@RequestBody, @DestinationVariable 활용)

5. 데이터 가공할거 있으면 가공 후 simpMessagingTemplate.convertAndSend("구독주소", 데이터); 보내주기

6. React에서 네트워크 탭 또는 log 찍어서 데이터 넘오는지 확인

7. React에서 넘어온 데이터를 useState로 활용

웹소켓 소스 코드

https://github.com/zxcvcx123/Spring-react-SockJS-STOMP-WebSocket

GitHub - zxcvcx123/Spring-react-SockJS-STOMP-WebSocket: SpringWebSocket

SpringWebSocket. Contribute to zxcvcx123/Spring-react-SockJS-STOMP-WebSocket development by creating an account on GitHub.

github.com