React Native 是 Facebook 推出并开源的跨平台挪动利用开发框架，是 React 在原生挪动利用平台的衍生产物，反对 iOS 和安卓两大平台。React Native 应用 Javascript 语言，相似于 HTML 的 JSX，以及 CSS 来开发挪动利用，因而相熟 Web 前端开发的技术人员只需很少的学习就能够进入挪动利用开发畛域，同时 React Native 也提供了靠近原生利用的性能和体验。

MQTT 是一种基于公布/订阅模式的 轻量级物联网音讯传输协定 ，可在重大受限的硬件设施和低带宽、高提早的网络上实现稳固传输。它凭借简略易实现、反对 QoS、报文小等特点，占据了物联网协定的半壁江山。

本文次要介绍如何在 React Native 我的项目中应用 MQTT，实现客户端与服务器的连贯、订阅、勾销订阅、收发音讯等性能。

新建 React Native 我的项目

这里以创立一个名为 RNMQTTDemo 的我的项目为例，开发环境为 macOS，利用平台为 iOS，具体过程参考 Setting up the development environment。

我的项目创立实现后，在我的项目根目录环境下，执行以下命令装置所需依赖：

npm install @react-native-async-storage/async-storage @rneui/base @rneui/themed

装置 MQTT 客户端模块

npm install react_native_mqtt

react_native_mqtt 是一个在 React Native 我的项目中应用的 MQTT 客户端模块，反对 iOS 和 Android。

MQTT 客户端模块应用

连贯 MQTT 服务器

这里应用 EMQ 提供的收费公共 MQTT 服务器，该服务基于 EMQ 的 MQTT 物联网云平台 创立。服务器接入信息如下：

  • Broker: broker.emqx.io
  • TCP Port: 1883
  • Websocket Port: 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 我的项目地址：https://github.com/emqx/MQTT-... 。

在我的项目根目录环境下，新建两个终端窗口，别离执行以下命令：

npx react-native startnpx react-native run-ios

执行完后将看到利用运行在 iOS 的模拟器中，其中顶部显示的是以后客户端的 id，如下图：

MQTT 连贯测试

这里应用 MQTT 5.0 客户端工具 - MQTT X 进行相干测试，创立一个名为 react-native-demo 的连贯，所有配置项均应用默认值，点击连贯按钮，连贯胜利后增加一个主题名称为 testTopic 的订阅，显示如下：

连贯

点击 APP 中的 CONNECT 按钮，连贯胜利后的界面显示如下，其中顶部 ClientID 一行的内容变成绿色，示意已胜利连贯到 MQTT 服务器。

主题订阅

输出须要订阅的主题，这里以 testTopic 为例，而后点击 SUBSCRIBE 按钮，订阅后的界面显示如下：

音讯公布

输出须要公布的音讯内容，输出实现后点击 PUBLISH 按钮，最下方会列出以后订阅主题下接管到的音讯，其中彩色背景的音讯是以后客户端收回去的，id_67485 就是以后客户端的 id，界面显示如下：

同时在 MQTT X 的 react-native-demo 连贯下，也往 testTopic 主题公布一些音讯，同时也能看到客户端 id 为 id_67458 往该主题公布的音讯，显示如下：

勾销订阅

在 APP 中点击 UNSCRIBE 按钮，而后在 MQTT X 上持续往 testTopic 主题公布一条内容为 { "msg": "hello test" } 的音讯，显示如下：

勾销订阅 testTopic 主题后，未收到 MQTT X 往该主题公布的音讯 { "msg": "hello test" }

总结

至此，咱们实现了在 iOS 平台上利用 React Native 构建一个 MQTT 利用，实现了客户端与 MQTT 服务器的连贯、主题订阅、收发音讯、勾销订阅等性能。

通过 React Native，开发者能够应用规范的 iOS 平台组件，开发出的利用简直与原生利用的性能类似；无缝的跨平台能够让团队更快地工作，同时开发过程中只需将改变保留，即可在 iOS 模拟器中查看实际效果。高效、靠近原生的性能、热重载和宽泛的社区反对，使得 React Native 成为很多挪动利用开发者的最佳抉择，而联合 React Native、MQTT 协定以及 MQTT 云服务，咱们也能够开发出很多乏味的翻新利用。

版权申明： 本文为 EMQ 原创，转载请注明出处。

原文链接：https://www.emqx.com/zh/blog/how-to-use-mqtt-in-react-native