如何在 React Native 项目中使用 MQTT
source link: https://blog.51cto.com/u_15204296/5377606
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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。
项目创建完成后，在项目根目录环境下，执行以下命令安装所需依赖：
安装 MQTT 客户端模块
react_native_mqtt 是一个在 React Native 项目中使用的 MQTT 客户端模块，支持 iOS 和 Android。
MQTT 客户端模块使用
连接 MQTT 服务器
这里使用 EMQ 提供的免费公共 MQTT 服务器 创建。服务器接入信息如下：
- Broker:broker.emqx.io
- TCP Port:1883
- Websocket Port:8083
创建客户端实例
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 服务器
this.setState(
{ status: 'isFetching' },
() => {
client.connect({
onSuccess: this.onConnect,
useSSL: false,
timeout: 3,
onFailure: this.onFailure
});
}
);
}
this.setState(
{ subscribedTopic: this.state.topic },
() => {
client.subscribe(this.state.subscribedTopic, { qos: 0 });
}
);
}
var message = new Paho.MQTT.Message(options.id + ':' + this.state.message);
message.destinationName = this.state.subscribedTopic;
client.send(message);
}
client.unsubscribe(this.state.subscribedTopic);
this.setState({ subscribedTopic: '' });
}
完整的 RNMQTTDemo 项目地址： https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-React-Native 。
在项目根目录环境下，新建两个终端窗口，分别执行以下命令：
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK