2022. 11. 26. 00:03ㆍReact/React websocket with spring kafka
웹소켓을 이용해서 많은 분들이 채팅 프로그램을 만드는거 같다. 예전에 화물차(컨테이너) 의 관제 시스템을 만들면서 웹소켓을 이용하여서 실시간으로 화물차의 위치정보를 받아서 지도 상의 실시간 위치 및 화물의 배송상태를 모니터링 할 수있도록 만들었던 경험이 있는데 그 때 웹소켓이 참 유용하였던거 같아서 Websocket, Kafka 를 이용하여 실시간으로 React App 에 배달정보를 업데이트는 하는 프로그램을 만들어 보자.
프로젝트 목적
- Spring Kafka 를 이용하여서 Producer, Consumer 구현을 익힌다.
- Spring Websocket 과 sockjs-client, stomp 을 이용하여서 Spring Kafka Consumer에 전송된 메세지를 이용하여 실시간 정보 업데이트에 대해 익힌다.
프로그램 요구사항
길동이 가맹점주는 실시간으로 라이더의 배송 상태를 실시간으로 확인 하기를 원한다.
실제로는 굉장히 많은 요구사항들이 있겠지만 본 프로젝트에서는 간단히 라이더가 배달정보를 전송하고 React 페이지에서 배달정보 상태를 실시간으로 업데이트는 되는지만 구현 하도록 하자.
① Kafka Producer
라이더로 부터 배달상태를 전송받고 Consumer 에게 배달상태를 전송한다.
라이더는 앱을 사용하여 배달상태를 전송해야 하지만 테스트시에는 Swagger 를 이용하여 배달상태를
전송한다.
② Kafa Consumer
Kafka Producer로 부터 전송 받은 배달상태 정보를 SimpleMessageTemplate을 이용하여서
메세지를 전송한다.
③ React App
React 프로그램에서는 sockjs-client 와 react-stomp 를 사용하여 Kafka Consumer 에서 전송한
메세지를 수신받는다.
프로그램 데모
'React > React websocket with spring kafka' 카테고리의 다른 글
| React WebSocket 연동 (0) | 2022.11.26 |
|---|---|
| Kafka consumer를 이용한 배달 정보 수신 및 WebSocket 배달정보 전송 (0) | 2022.11.26 |
| Kafka producer를 이용한 배달 정보 전송하기 (0) | 2022.11.26 |