如何在 React Native 项目中使用 MQTT

Posted 2023-05-17

参考技术A

React Native 是 Facebook 推出并开源的跨平台移动应用开发框架，是 React 在原生移动应用平台的衍生产物，支持 ios 和安卓两大平台。React Native 使用 javascript 语言，类似于 html 的 JSX，以及 CSS 来开发移动应用，因此熟悉 Web 前端开发的技术人员只需很少的学习就可以进入移动应用开发领域，同时 React Native 也提供了接近原生应用的性能和体验。

MQTT 是一种基于发布/订阅模式的 轻量级物联网消息传输协议 ，可在严重受限的硬件设备和低带宽、高延迟的网络上实现稳定传输。它凭借简单易实现、支持 QoS、报文小等特点，占据了物联网协议的半壁江山。

本文主要介绍如何在 React Native 项目中使用 MQTT，实现客户端与服务器的连接、订阅、取消订阅、收发消息等功能。

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

项目创建完成后，在项目根目录环境下，执行以下命令安装所需依赖：

react_native_mqtt 是一个在 React Native 项目中使用的 MQTT 客户端模块，支持 iOS 和 android。

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

完整的 RNMQTTDemo 项目地址： https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-React-Native 。

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

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

这里使用 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 云服务，我们也可以开发出很多有趣的创新应用。

如何在 react-native 项目中保存 info.plist 中的更改

【中文标题】如何在 react-native 项目中保存 info.plist 中的更改

【英文标题】：How to save changes in info.plist in react-native project

【发布时间】：2020-05-06 15:32:15

【问题描述】：

我使用 react-native '0.62.2'，我有一些更改需要保存在 'info.plist' 中。

我的问题是，当我安装 pod 时，所有更改都被丢弃了。

我想知道这种情况是否有解决方案。

我知道使用 'node_modules' 这个 npm 包可以提供帮助，所以我想知道 info.plist 是否也有一些东西。

提前谢谢你。

【参考方案1】：

因此，您可能正在更改您的一个 pod（即在您的 pod 文件夹中）的 info.plist 文件，而不是您项目的那个。

转到 ios 文件夹，您的项目文件夹，您的项目有 info.plist。

如果你打开 xcode 并在那里编辑它可能更容易编辑。

【讨论】：

@barak109 为了清楚起见，我添加了一张图片，请确保您不要拼错key，否则它也会被删除。

谢谢，但我最初所做的并没有帮助

您要添加的密钥是什么？我认为这更可能是您如何添加它的问题。做 pod install 永远不应该覆盖你的项目 info.plist。

是的，我现在发现了问题，我使用了 node_modules 并在包中更改了 info.plist，所以它已经解决了 :) 但是很高兴知道 pod install 永远不会覆盖项目 info.plist