[React.js] React와 EventEmitter3를 활용하여 STOMP WebSocket 메시지 처리하기

React 개발에서 컴포넌트 간 통신은 주로 props와 state를 통해 이루어집니다. 하지만 때때로 이벤트 기반 통신이 더 적합할 수 있습니다. Node.js에서 널리 사용되는 EventEmitter를 웹 애플리케이션에 적용하고 싶을 때 eventemitter3 라이브러리가 유용하게 사용될 수 있습니다. 이 글에서는 eventemitter3를 활용하여 React 컴포넌트 간 이벤트 기반 통신을 구현하는 방법과 Stompjs 메세지를 처리하는 방법에 대해 소개하도록 하겠습니다.

 

eventEmitter3란?

eventemitter3는 이벤트 기반 통신을 위한 매우 가벼운 라이브러리입니다. Node.js의 EventEmitter와 API 호환성을 유지하면서 브라우저와 다른 JavaScript 환경에서도 사용할 수 있도록 설계되었습니다. 이를 통해 컴포넌트나 모듈 간에 데이터를 비동기적으로 주고받을 수 있습니다.

 

설치

npm install eventemitter3

 

기본 구성

React 프로젝트에서 eventemitter3를 사용하기 위해, 먼저 EventEmitter 인스턴스를 생성하고 이를 애플리케이션 전반에서 사용할 수 있도록 합니다.

EventEmitter 인스턴스 설정

eventEmitter.js 파일을 생성하고 다음과 같이 인스턴스를 설정합니다:

import EventEmitter from 'eventemitter3';
const emitter = new EventEmitter();
export default emitter;

 

예제 코드

이제 Publisher 컴포넌트와 Subscriber 컴포넌트를 생성하여 이벤트를 발생시키고 수신하는 과정을 구현합니다.

Publisher 컴포넌트

이벤트를 발생시키는 컴포넌트입니다. 사용자가 버튼을 클릭하면 message 이벤트가 발생합니다.

import React from 'react';
import emitter from './eventEmitter';

function Publisher() {
  const sendMessage = () => {
    emitter.emit('message', 'Hello from Publisher!');
  };

  return (
    <div>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
}

export default Publisher;

 

.emit(eventName, ...args): 특정 이벤트를 발생시킵니다. eventName은 발생시킬 이벤트의 이름이고, ...args는 이벤트 리스너에게 전달될 인자들입니다.

 

Subscriber 컴포넌트

이벤트를 수신하여 처리하는 컴포넌트입니다. message 이벤트를 수신하면 화면에 메시지를 표시합니다.

import React, { useEffect, useState } from 'react';
import emitter from './eventEmitter';

function Subscriber() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const handleMessages = (msg) => {
      console.log('Message received in Subscriber:', msg);
      setMessage(msg);
    };

    emitter.on('message', handleMessages);

    return () => {
      emitter.off('message', handleMessages);
    };
  }, []);

  return (
    <div>
      <p>Received Message: {message}</p>
    </div>
  );
}

export default Subscriber;

 

.on(eventName, listener): 이벤트 리스너를 등록합니다. eventName은 감지할 이벤트의 이름이고, listener는 이벤트 발생 시 호출될 함수입니다.

 

 

Stomp WebSocket 메세지 처리

이제 eventEmmit3을 이용하여 웹 소켓(stompjs) 메세지를 처리하는 방법에 대해 알아보겠습니다.

 

WebSocket과 STOMP 설정

WebSocket 연결을 설정하고 STOMP 프로토콜을 사용하여 특정 주제를 구독하여 콜백 함수로 받는 메세지를 emit하도록 합니다.

import { Client } from 'stompjs';
import emitter from './eventEmitter';

const webSocketClient = new Client({
  brokerURL: "ws://your-websocket-server-url",
  connectHeaders: {
    login: "user",
    passcode: "password",
  },
  debug: function (str) {
    console.log('STOMP: ' + str);
  },
  reconnectDelay: 5000,
  heartbeatIncoming: 4000,
  heartbeatOutgoing: 4000,
});

webSocketClient.onConnect = function (frame) {
  const subscription = webSocketClient.subscribe(`description`, (message) => {
    const receivedMessage = JSON.parse(message.body);
    emitter.emit('message', receivedMessage);
  });
};

 

React 컴포넌트에서 이벤트 처리

이제 React 컴포넌트에서 이벤트를 수신하고 처리하는 로직을 통해 메세지를 처리하도록 합니다.

import React, { useEffect, useState } from 'react';
import emitter from './eventEmitter';

function Component() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const handleMessages = (msg) => {
      setMessages(prevMessages => [...prevMessages, msg]);
    };
    
    emitter.on('message', handleMessages);

    return () => {
      emitter.off('message', handleMessages);
    };
  }, []);

  return (
    <div>
      <h1>Received Messages</h1>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
    </div>
  );
}

export default Component;

 

 

참고

https://www.npmjs.com/package/eventemitter3

eventemitter3

https://stomp-js.github.io/stomp-websocket/codo/extra/docs-src/Usage.md.html

STOMP.js Documentation