CPPM

AgentEventManager 싱글톤과 컴포넌트 생명주기 분리

WebSocket 수신은 AgentEventManager 한 곳에서 담당하고, 화면 컴포넌트는 필요한 이벤트를 구독한 뒤 언마운트 시 해제하도록 구성한 구조 발췌입니다. 실제 사내 코드의 식별자와 전송 형식은 제거·축약했습니다.

type AgentEvent = { type: string; message: string };
type Listener = (event: AgentEvent) => void;

class AgentEventManager {
  private static instance: AgentEventManager;
  private listeners = new Set<Listener>();
  private socket?: WebSocket;

  private constructor() {}

  static getInstance() {
    return (this.instance ??= new AgentEventManager());
  }

  connect(socket: WebSocket) {
    if (this.socket === socket) return;
    this.socket = socket;
    socket.addEventListener("message", this.handleMessage);
  }

  subscribe(listener: Listener) {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener);
  }

  private handleMessage = (message: MessageEvent<string>) => {
    const event = JSON.parse(message.data) as AgentEvent;
    this.listeners.forEach((listener) => listener(event));
  };
}

const agentEventManager = AgentEventManager.getInstance();

// React 컴포넌트에서는 구독과 해제만 담당
useEffect(() => {
  const unsubscribe = agentEventManager.subscribe(setAgentEvent);
  return unsubscribe;
}, []);

구조 발췌 · 수신 계층과 React 구독 계층을 분리