React에서 MQTT로 실시간 통신 구현하기

 

MQTT(Message Queuing Telemetry Transport)는 경량 프로토콜로 IoT와 실시간 데이터 전송에 최적화되어 있습니다. React 애플리케이션에서 MQTT를 활용하면 클라이언트 간의 실시간 통신이 가능합니다. 이 글에서는 React에서 MQTT를 설정하고 사용하는 방법을 단계별로 설명합니다.

---

1. MQTT란?

MQTT는 낮은 대역폭 환경에서도 안정적으로 동작하며 Pub/Sub(Publish/Subscribe) 메시징 모델을 사용합니다.

• Publisher(발행자): 메시지를 특정 주제(Topic)에 발행하는 역할.
• Subscriber(구독자): 특정 주제를 구독하여 메시지를 수신하는 역할.
• Broker: Publisher와 Subscriber 간 메시지를 중개하는 서버.

---

2. React 프로젝트 준비하기

1. React 프로젝트 생성
2. npx create-react-app react-mqtt-demo cd react-mqtt-demo
3. MQTT.js 라이브러리 설치
   React 애플리케이션에서 MQTT 통신을 위해 mqtt 패키지를 설치합니다.
4. npm install mqtt

---

3. MQTT 브로커 설정

MQTT 통신에는 브로커가 필요합니다. 브로커로 Eclipse Mosquitto나 HiveMQ Cloud를 사용할 수 있습니다.

무료 MQTT 브로커 예시:

• broker.hivemq.com
• 포트: 1883 (TCP), 8883 (TLS)

---

4. React에서 MQTT 설정하기

1. MQTT 클라이언트 초기화
   mqtt 라이브러리를 사용하여 MQTT 브로커에 연결합니다.
2. 예제 코드 작성

App.js

import React, { useEffect, useState } from 'react';
import mqtt from 'mqtt';

const MQTT_BROKER = 'wss://broker.hivemq.com:8000/mqtt'; // HiveMQ WebSocket 브로커
const TOPIC = 'react/mqtt/demo'; // 주제(Topic)

const App = () => {
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState('');
  const [client, setClient] = useState(null);

  useEffect(() => {
    // MQTT 클라이언트 연결
    const mqttClient = mqtt.connect(MQTT_BROKER);

    mqttClient.on('connect', () => {
      console.log('MQTT Connected');
      mqttClient.subscribe(TOPIC); // Topic 구독
    });

    mqttClient.on('message', (topic, payload) => {
      console.log(`Received: ${payload.toString()}`);
      setMessages((prev) => [...prev, payload.toString()]);
    });

    setClient(mqttClient);

    // 컴포넌트 언마운트 시 클라이언트 종료
    return () => {
      mqttClient.end();
    };
  }, []);

  const handlePublish = () => {
    if (client && message) {
      client.publish(TOPIC, message); // 메시지 발행
      setMessage('');
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>React MQTT Demo</h1>
      <div>
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="메시지 입력"
        />
        <button onClick={handlePublish}>발행</button>
      </div>
      <div>
        <h2>수신된 메시지</h2>
        <ul>
          {messages.map((msg, index) => (
            <li key={index}>{msg}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default App;

---

5. 코드 설명

1. MQTT 클라이언트 생성
   mqtt.connect를 사용하여 브로커에 연결합니다. HiveMQ의 WebSocket URL을 사용했습니다.
2. 이벤트 핸들러
   • on('connect'): 브로커 연결 성공 시 호출됩니다. 여기서 구독할 Topic을 지정합니다.
   • on('message'): 브로커에서 Topic 메시지를 수신했을 때 호출됩니다.
3. 메시지 발행
   client.publish(topic, message)를 사용하여 브로커로 메시지를 전송합니다.

---

6. 브라우저에서 확인하기

1. 애플리케이션 실행:
2. npm start
3. 다른 브라우저 창이나 탭에서 동일한 애플리케이션을 열어 메시지를 발행하면, 각 클라이언트가 실시간으로 메시지를 수신합니다.

---

7. 추가 기능 구현

• 보안 연결(TLS): MQTT 브로커에 TLS 연결을 사용하려면 WebSocket URL과 인증서를 설정해야 합니다.
• 다중 Topic 구독: 여러 Topic을 구독하려면 배열로 Topic을 전달하거나 별도로 subscribe 메서드를 호출합니다.
• 메시지 포맷: JSON 형식의 메시지를 발행 및 수신하여 구조화된 데이터를 처리할 수 있습니다.

client.publish(TOPIC, JSON.stringify({ sender: 'user1', content: 'Hello!' }));

---

마무리

React 애플리케이션에서 MQTT를 사용하면 IoT, 실시간 채팅, 데이터 스트리밍 등 다양한 분야에서 강력한 실시간 통신 기능을 구현할 수 있습니다. MQTT 브로커와 React의 조합을 활용하여 사용자 경험을 더욱 향상시켜 보세요!