共计 2729 个字符，预计需要花费 7 分钟才能阅读完成。
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_mqttreact_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 start
npx 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
