React 프로젝트에서 MQTT를 사용하는 방법

React(React.js 또는 ReactJS라고도 함)는 사용자 인터페이스 또는 UI 구성 요소를 구축하기 위한 오픈 소스, 프런트 엔드, JavaScript 라이브러리입니다. Facebook과 개별 개발자 및 회사 커뮤니티에서 유지 관리합니다. React는 단일 페이지 또는 모바일 애플리케이션 개발의 기반으로 사용할 수 있습니다. 그러나 React는 데이터를 DOM으로 렌더링하는 데에만 관심이 있으므로 React 애플리케이션을 만들려면 일반적으로 상태 관리 및 라우팅을 위한 추가 라이브러리를 사용해야 합니다. Redux와 React Router는 각각 그러한 라이브러리의 예입니다. 1

이 글은 클라이언트와 MQTT 브로커 사이에 연결, 구독, 메시징 및 구독 취소 등을 구현하기 위해 React 프로젝트에서 MQTT를 사용하는 방법을 주로 소개합니다.

프로젝트 초기화

새로운 과제

참조 링크: https://reactjs.org/docs/getting-started.html

Create React App를 사용하여 새 React 애플리케이션 만들기

  npx create-react-app react-mqtt-test

TypeScript를 사용해야 하는 경우 명령줄 끝에 --template typescript 매개변수를 추가하기만 하면 됩니다.

  npx create-react-app react-mqtt-test --template typescript

그런 다음 React 프로젝트에 필요한 TypeScript 유형 라이브러리를 추가하십시오.

  npm install --save typescript @types/node @types/react @types/react-dom @types/jest
  # or
  yarn add typescript @types/node @types/react @types/react-dom @types/jest

TypeScript의 사용은 이 기사의 예제에서 중점적으로 다루지는 않겠지만, 사용을 원하는 경우 생성 예제와 전체 코드 예제를 참조한 후 TypeScript 기능을 추가할 수 있습니다.

CDN을 통해 가져오기

  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

MQTT 클라이언트 라이브러리 설치

React는 JavaScript 라이브러리이므로 MQTT 클라이언트 라이브러리로 MQTT.js을 사용할 수 있습니다.

The following methods 2, 3 are more suitable for referencing projects created by React via CDN links.

npm 또는 yarn 명령(둘 중 하나)을 사용하여 명령줄을 통해 설치

   npm install mqtt --save
   # or
   yarn add mqtt

CDN을 통해 가져오기

   <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

로컬에 다운로드한 다음 상대 경로를 사용하여 가져오기

   <script src="/your/path/to/mqtt.min.js"></script>

MQTT의 사용

MQTT 브로커 연결

이 글에서는 EMQX에서 제공하는 the free public MQTT broker을 사용합니다. 이 서비스는 EMQXMQTT IoT cloud platform를 기반으로 만들어집니다. 서버 접속 정보는 다음과 같습니다.

브로커: broker.emqx.io

TCP 포트: 1883

웹 소켓 포트: 8083

연결하다

const [client, setClient] = useState(null);
const mqttConnect = (host, mqttOption) => {
  setConnectStatus('Connecting');
  setClient(mqtt.connect(host, mqttOption));
};
useEffect(() => {
  if (client) {
    console.log(client)
    client.on('connect', () => {
      setConnectStatus('Connected');
    });
    client.on('error', (err) => {
      console.error('Connection error: ', err);
      client.end();
    });
    client.on('reconnect', () => {
      setConnectStatus('Reconnecting');
    });
    client.on('message', (topic, message) => {
      const payload = { topic, message: message.toString() };
      setPayload(payload);
    });
  }
}, [client]);

구독하다

const mqttSub = (subscription) => {
  if (client) {
    const { topic, qos } = subscription;
    client.subscribe(topic, { qos }, (error) => {
      if (error) {
        console.log('Subscribe to topics error', error)
        return
      }
      setIsSub(true)
    });
  }
};

구독 취소

const mqttUnSub = (subscription) => {
  if (client) {
    const { topic } = subscription;
    client.unsubscribe(topic, error => {
      if (error) {
        console.log('Unsubscribe error', error)
        return
      }
      setIsSub(false);
    });
  }
};

게시

const mqttPublish = (context) => {
  if (client) {
    const { topic, qos, payload } = context;
    client.publish(topic, payload, { qos }, error => {
      if (error) {
        console.log('Publish error: ', error);
      }
    });
  }
}

연결 끊기

const mqttDisconnect = () => {
  if (client) {
    client.end(() => {
      setConnectStatus('Connect');
    });
  }
}

테스트

우리는 연결 생성, 주제 구독, 메시지 송수신, 구독 취소 및 연결 해제 기능과 함께 React를 사용하여 다음과 같은 간단한 브라우저 애플리케이션을 작성했습니다.

전체 프로젝트 예제 코드: https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-React .



MQTT 5.0 client tool - MQTT X을 다른 클라이언트로 사용하여 메시지 송수신을 테스트하십시오.



MQTT X를 사용하여 주제에 메시지를 보낼 때 볼 수 있듯이 MQTT X가 브라우저 측에서 정상적으로 메시지를 수신할 수 있음을 알 수 있습니다.

요약

요약하면 React 프로젝트에서 MQTT 연결 생성을 구현하고 클라이언트와 MQTT 브로커 간의 구독, 메시지 전송 및 수신, 구독 취소 및 연결 해제를 시뮬레이션했습니다.

이 기사에서는 React v16.13.1을 사용하므로 Hook Component 기능을 예제 코드로 사용하여 시연하거나 필요한 경우 전체 예제 코드에서 ClassMqtt 구성 요소를 참조하여 프로젝트 빌드에 Class Component 기능을 사용할 수 있습니다. .



https://en.wikipedia.org/wiki/React_(web_framework) ↩