Как использовать MQTT в проекте React Native
React Native — это кроссплатформенная среда разработки мобильных приложений Facebook с открытым исходным кодом, производная от React для собственной платформы мобильных приложений, которая поддерживает платформы iOS и Android. React Native использует Javascript, аналогичный HTML JSX, и CSS для разработки мобильных приложений, что позволяет техническому персоналу, знакомому с веб-интерфейсом, начать работу над разработкой мобильных приложений с минимальными затратами на обучение. React Native также предлагает производительность и возможности, близкие к нативным приложениям.
MQTT это облегченный протокол обмена сообщениями IoT на основе модели публикации/подписки, которая обеспечивает стабильную передачу через сильно ограниченные аппаратные устройства и сети с низкой пропускной способностью и высокой задержкой. Благодаря простоте реализации, поддержке QoS и небольшому размеру сообщения он широко используется в индустрии IoT.
В этой статье основное внимание уделяется использованию MQTT в проектах React Native для подключения, подписки и отмены подписки, а также отправки и получения сообщений от клиентов к MQTT-брокеры.
Создайте новый проект React Native
Вот пример создания проекта с именем RNMQTTDemo в среде разработки macOS и платформе приложений iOS. Ссылаться на Настройка среды разработки для деталей.
После создания проекта выполните следующие команды, чтобы установить необходимые зависимости в корневой среде проекта.
npm install @react-native-async-storage/async-storage @rneui/base @rneui/themed
Установите клиентский модуль MQTT
npm install react_native_mqtt
react_native_mqtt — это клиентский модуль MQTT, используемый для проекта React Native, который поддерживает iOS и Android.
Как использовать клиентский модуль MQTT
Подключение к серверу MQTT
Мы используем бесплатный публичный сервер MQTT предоставляется EMQ, который основан на Облако MQTT EMQX. Информация о доступе к серверу выглядит следующим образом:
- Маклер:
broker.emqx.io - TCP-порт: 1883 г.
- Порт веб-сокета: 8083
Создать экземпляр клиента
init({
size: 10000,
storageBackend: AsyncStorage,
defaultExpires: 1000 * 3600 * 24,
enableCache: true,
sync : {}
});
const options = {
host: 'broker.emqx.io',
port: 8083,
path: '/testTopic',
id: 'id_' + parseInt(Math.random()*100000)
};
client = new Paho.MQTT.Client(options.host, options.port, options.path);
Подключиться к MQTT-серверу
connect = () => {
this.setState(
{ status: 'isFetching' },
() => {
client.connect({
onSuccess: this.onConnect,
useSSL: false,
timeout: 3,
onFailure: this.onFailure
});
}
);
}
subscribeTopic = () => {
this.setState(
{ subscribedTopic: this.state.topic },
() => {
client.subscribe(this.state.subscribedTopic, { qos: 0 });
}
);
}
Публиковать
sendMessage = () =>{
var message = new Paho.MQTT.Message(options.id + ':' + this.state.message);
message.destinationName = this.state.subscribedTopic;
client.send(message);
}
unSubscribeTopic = () => {
client.unsubscribe(this.state.subscribedTopic);
this.setState({ subscribedTopic: '' });
}
Запуск проекта
Полный проект RNMQTTDemo находится по адресу:
В корневой среде проекта создайте два новых окна терминала и выполните следующие команды:
npx react-native start
npx react-native run-ios
После этого вы увидите запуск приложения в эмуляторе iOS, где вверху отображается идентификатор клиента, как показано ниже:
Тест подключения MQTT
Мы будем использовать Клиентский инструмент MQTT 5.0 — MQTT X для выполнения соответствующих тестов. Создайте соединение с именем react-native-demo, используйте значения по умолчанию для всех элементов конфигурации, нажмите кнопку подключения и добавьте подписку с именем темы, testTopicпосле успешного подключения, следующим образом:
Соединять
Нажмите кнопку ПОДКЛЮЧИТЬ в ПРИЛОЖЕНИИ, и интерфейс будет отображаться, как показано ниже. После успешного подключения содержимое строки ClientID вверху станет зеленым, указывая на то, что сервер MQTT успешно подключен.
Введите тему, на которую хотите подписаться. Здесь мы берем testTopic в качестве примера. Затем нажмите кнопку ПОДПИСАТЬСЯ. Интерфейс после подписки будет отображаться следующим образом:
Публиковать
Введите содержание сообщения, которое будет опубликовано, нажмите кнопку ПУБЛИКАЦИЯ после завершения ввода, и сообщения, полученные в рамках текущей подписанной темы, будут перечислены внизу, среди которых сообщение с черным фоном отправлено настоящим клиентом. . Идентификатор текущего клиента — id_67485, а интерфейс показан следующим образом:
В то же время, при подключении MQTT X с реакцией на нативную демонстрацию, мы также будем публиковать некоторые сообщения в testTopic тема. Сообщения, опубликованные идентификатором клиента id_67458 в теме, также можно увидеть, что отображается следующим образом:
Нажмите кнопку ОТПИСАТЬСЯ в ПРИЛОЖЕНИИ. Затем перейдите к публикации сообщения с помощью { "msg": "hello test" } в тему testTopic на MQTT X со следующим отображением:
После отписки от темы testTopic сообщение от MQTT X для этой темы получаться не будет. { "msg": "hello test" }.
На данный момент мы закончили создание приложения MQTT на платформе iOS с использованием React Native, реализовав такие функции, как подключение клиента к серверу MQTT, подписка на темы, отправка и получение сообщений и отписка.
С React Native разработчики могут использовать стандартные компоненты платформы iOS и разрабатывать приложения, которые работают почти так же хорошо, как нативные приложения. Бесшовная кроссплатформенность позволяет командам работать быстрее, просто сохраняя изменения во время разработки, как показывают фактические результаты в симуляторе iOS. Эффективная, почти родная производительность, горячая перезагрузка и широкая поддержка сообщества делают React Native лучшим выбором для многих разработчиков мобильных приложений. Сочетая React Native с протоколом MQTT и облачным сервисом MQTT, пользователи также могут разрабатывать различные интересные и инновационные приложения.
Первоначально опубликовано на
