Как использовать MQTT в проекте React

React (также известный как React.js или ReactJS) — это интерфейсная библиотека JavaScript с открытым исходным кодом для создания пользовательских интерфейсов или компонентов пользовательского интерфейса. Он поддерживается Facebook и сообществом отдельных разработчиков и компаний. React можно использовать как основу при разработке одностраничных или мобильных приложений. Однако React занимается только рендерингом данных в DOM, поэтому создание приложений React обычно требует использования дополнительных библиотек для управления состоянием и маршрутизации. Redux и React Router являются соответствующими примерами таких библиотек.

Эта статья в основном знакомит с тем, как использовать MQTT в проекте React для реализации подключения, подписки, обмена сообщениями и отказа от подписки и т. д. между клиентом и MQTT-брокером.

Инициализация проекта

Новый проект

Ссылка на ссылку:

Создание новых приложений React с помощью Create React App

npx create-react-app react-mqtt-test

Если вам нужно использовать TypeScript, просто добавьте параметр —template typescript в конце командной строки.

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

Затем добавьте библиотеку типов TypeScript, необходимую в проекте React.

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="
<script crossorigin src="

Установите клиентскую библиотеку MQTT

Поскольку React — это библиотека JavaScript, можно использовать MQTT.js в качестве клиентской библиотеки MQTT.

Следующие методы 2, 3 больше подходят для ссылок на проекты, созданные React, через ссылки CDN.

Установка через командную строку, либо с помощью команды npm, либо yarn (одной или другой)

npm install mqtt --save
# or
yarn add mqtt

Импорт через CDN

<script src="

Загрузите в локальную папку, а затем импортируйте, используя относительный путь

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

Использование MQTT

Подключить брокера MQTT

В этой статье будет использоваться бесплатный публичный MQTT-брокер который предоставляется EMQX. Эта услуга основана на EMQX Облачная платформа Интернета вещей MQTT создавать. Информация о доступе к серверу следующая.

• Маклер: 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 — MQTT X в качестве другого клиента для проверки отправки и получения сообщений.

Вы можете видеть, что MQTT X может нормально получать сообщения со стороны браузера, как это видно при отправке сообщения в тему с помощью MQTT X.

Таким образом, мы реализовали создание соединения MQTT в проекте React и смоделировали подписку, отправку и получение сообщений, отмену подписки и отключение между клиентом и брокером MQTT.

В этой статье мы используем React v16.13.1, поэтому функция Hook Component будет использоваться в качестве примера кода для демонстрации, или, при необходимости, вы можете обратиться к компоненту ClassMqtt в полном примере кода, чтобы использовать функцию Class Component для построения проекта. .

Первоначально опубликовано на