React WebSocket 연동

앞선 예제에서 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";
import Stomp from "stompjs";

// connection 설정
const sockJS = new SockJS("http://localhost:9001/delivery");    // ①
const stompClient = Stomp.over(sockJS);

const DashBoard = (props) => {
  const [deliveryList, setDeliveryList] = useState(props.items);

  useEffect(() => {
    connect();
  });

  // When connection is ok then subscribe Delivery status otherwise error message print
  const connect = () => {
    stompClient.connect({}, onConnected, onError);              // ②
  };

  // When socket connection connect
  const onConnected = () => {
    stompClient.subscribe("/topic/delivery", (payload) => {     // ③
      const newDelivery = JSON.parse(payload.body);

      // Change delivery status of response data
      const newDeliveryList = deliveryList.map((item) => {
        if (item.id === newDelivery.id) {
          if (newDelivery.status === "PENDING") {
            item.status = "배송전";
          } else if (newDelivery.status === "DELIVERING") {
            item.status = "배송중";
          } else {
            item.status = "배송완료";
          }
          item.statusColor = newDelivery.statusColor.toLowerCase();
        }

        return item;
      });

      setDeliveryList(newDeliveryList);
    });
  };

  // when socket connection disconnect
  const onError = () => {
    console.log(">>> DISCONNECT");
  };

  return (
    <div className="h-100 w-full flex items-center justify-center">
      <div className="p-4 m-4 w-full lg:w-3/4 lg:max-w-3xl">
        <div>
          <h1 className="inline-block text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200">
            길동이 족발 배송현황
          </h1>
        </div>
        <ul className="list-none mt-3">
          {deliveryList.map((delivery) => (
            <li
              key={delivery.id}
              className="flex items-center justify-between px-2 py-3 border-b"
            >
              <div>
                <p className="mt-1 text-md font-bold text-indigo-900">
                  {delivery.id.toUpperCase()}({delivery.name})
                </p>
              </div>
              <div>
                <button
                  className={`w-36 py-3 px-3 text-sm focus:outline-none leading-none text-${delivery.statusColor}-700 bg-${delivery.statusColor}-100 rounded`}
                >
                  {delivery.status}
                </button>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default DashBoard;

① Consumer Endpoint 주소

    Kafka Consumer 프로젝트에서 WebSocketConfiguration에 정의된 addEndPoints 참고

 

② WebSocket 연동 후 정상적으로 연결된 경우 onConnected callback 함수를 호출 하고 연결 실패

     인경우 onError callback 함수 호출

 

③ Topic 수신

     Kafka Consumer 프로젝트에서 DeliveryListener의 설정된 Topic 명

 

테스트

① Zooker 실행

    ./bin/zkServer.cmd

 

② Kafka Server 실행

    ./bin/windows/kafka-server-start.bat ./config/server.properties

 

③ Spring Kafka Producer 실행

     KafkaDeliveryProducerApplication 실행

 

④ Spring Kafka Consumer 실행

     KafkaDeliveryProducerApplication 실행

 

⑤ React App 실행

     npm start

 

⑥ Swagger UI 실행 후 전송 테스트 수행

아래그림은 라이더가 배달정보를 전송했을때 화면에서는 별도의 Refresh 없이 실시간으로

배달상태정보와 색깔이 바뀌는 것을 확인 할 수 있다.

 

Wrap up

이번 프로젝트에서는 Spring Kafka, WebSocket, Stomp 을 사용하여서 어떻게 연동이 되는지 가장

기본적인 부분만 설명 하였다.

 

그 이유는 가장 기본적인 기능외에 다른 부가기능들은 기본 적인 내용을 충분히 숙지한 후 에

확장하여서 사용하면 되기 때문이다.

 

항상 기본에 충실하는 것이 먼저 인거 같다.

 

소스다운로드

https://github.com/roopy1210/react-websocket-with-spring-kafka/tree/main/react-delivery-dashboard-app

GitHub - roopy1210/react-websocket-with-spring-kafka