앞선 예제에서 Producer, Consumer 를 통해서 라이더들이 전송한 배달정보를 받고 보내는 테스트 까지 완료 했다. 마지막으로 React App 을 통해서 전달받은 배달정보로 배송상태의 정보와 색깔을 변경 해보도록 하자. TodoList 에서 기본적인 React 프로젝트 설정에 대해서 설명 하여서 이 부분은 생략 하겠다. 아래 소스를 보면서 어떻게 WebSocket을 연동하는지 알아보도록 하자. /* * install * nap install react-stomp * npm install sockjs-client --save */ import React, { useState, useEffect } from "react"; import SockJS from "sockjs-client"; impor..

Producer에서 전송한 배달정보를 수신하여서 WebSocket으로 배달정보를 전송한다. Spring Kafka Consumer Project 서버 설정을 위한 application.yml server: port: 9001 spring: output: # Console Color 표시 ansi: enabled: ALWAYS kafka: consumer: bootstrap-servers: localhost:9092 Kafka consumer configuration package com.roopy.delivery.consumer.config; import lombok.RequiredArgsConstructor; import org.apache.kafka.clients.consumer.ConsumerCon..

라이더들은 배달 정보를 앱을 통해 전송한다. 앞에서 보았지만 앱 대신에 Swagger를 이용하여서 메세지를 전송한다. Zookeeper 설치 및 설정 Zookeeper 설치 및 설정은 아래 글을 참고 하시면 됩니다. https://jydlove.tistory.com/82 이번 프로젝트에서는 zNode1 하나만 설정 하여서 프로젝트를 진행하도록 하겠습니다. Kafka 설치 및 설정 Kafka 설치 및 설정은 아래 글을 참고 하시면 됩니다. https://jydlove.tistory.com/83 이번 프로젝트에서는 kafkaNode1 하나만 설정 하여서 프로젝트를 진행하도록 하겠습니다. Spring Kafka Producer Project 서버 설정을 위한 application.yml server: port..

웹소켓을 이용해서 많은 분들이 채팅 프로그램을 만드는거 같다. 예전에 화물차(컨테이너) 의 관제 시스템을 만들면서 웹소켓을 이용하여서 실시간으로 화물차의 위치정보를 받아서 지도 상의 실시간 위치 및 화물의 배송상태를 모니터링 할 수있도록 만들었던 경험이 있는데 그 때 웹소켓이 참 유용하였던거 같아서 Websocket, Kafka 를 이용하여 실시간으로 React App 에 배달정보를 업데이트는 하는 프로그램을 만들어 보자. 프로젝트 목적 Spring Kafka 를 이용하여서 Producer, Consumer 구현을 익힌다. Spring Websocket 과 sockjs-client, stomp 을 이용하여서 Spring Kafka Consumer에 전송된 메세지를 이용하여 실시간 정보 업데이트에 대해 익..