React Native中使用Mqtt

最新推荐文章于 2024-06-20 09:37:33 发布

VVVGG

最新推荐文章于 2024-06-20 09:37:33 发布

阅读量1.4k

点赞数

分类专栏： React Native

本文链接：https://blog.csdn.net/VVVZCS/article/details/102852668

版权

React Native 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

环境：

1，在项目中安装包

npm install react-native-native-mqtt --save

项目GitHub地址 https://github.com/davesters/rn-native-mqtt

2，在本地搭建Mqtt服务器

这里使用的EMQ来搭建Mqtt服务器

EMQ官网：https://www.emqx.io/cn/

点击右上角的免费试用

然后下载Windows版，也有其他操作系统的，都可以在官网找到安装方法

下载完成之后，解压到没有中文的路径中

现在还不能直接使用，需要下载License

在下载的下面有

我们使用免费30天的测试就可以了，如果需要正式使用，需要购买企业版或者公司服务器上自己搭建一个Mqtt服务器

下载完成之后将License中的所有文件放到emqx\bin目录下

然后在bin目录下打开命令行（可以在bin目录下按住shift然后点击鼠标右键），选择在此处打开PowerShell窗口

然后运行 .\emqx start开启服务，注： .\emqx stop 关闭服务

然后在浏览器中访问http://127.0.0.1:18083 应该就可以进入控制台界面

账号默认为：admin

密码默认为：public

3，在RN程序中创建会话，发布者和订阅者（参照react-native-native-mqtt）这个包中的写法

这里的192.168.1.9 请替换成自己电脑的IP地址，且需要保证测试Android设备和电脑在同一个无线网络下，

如果无法连接至服务器，可能是防火墙的问题，需要把电脑的防火墙打开

import React, { Component } from 'react';
import {
  View,
  Text
} from 'react-native';
import * as Mqtt from 'react-native-native-mqtt';
import { Buffer } from 'buffer'

const client = new Mqtt.Client('tcp://192.168.1.9:1883');

class BottomPage2 extends Component {
  constructor(props) {
    super(props);
    this.handlePublic = this.handlePublic.bind(this);
  }
  render () {
    return (
      <View>
        <Text onPress={this.handlePublic} style={{ fontSize: 65 }}>发布信息</Text>
      </View>
    )
  }

  componentDidMount() {
    this.handleMqttStart();
  }

  componentWillUnmount() {
    this.handleMqttClose();
  }

  handleMqttStart() {
    client.connect({
      clientId: '1001',
      username: "ReSword",
      password: "0831"
    }, err => {
      console.log(err);
    });

    client.on(Mqtt.Event.Message, (topic, message) => {
      console.log('Mqtt Message:', topic, message.toString());
    });
    
    client.on(Mqtt.Event.Connect, () => {
      console.log('MQTT Connect');
      client.subscribe(['Test'], [0]);
    });
  }

  handleMqttClose() {
    client.disconnect();
    client.close();
  }

  handlePublic() {
    const buf = Buffer.from('runoob', 'ascii');
    client.publish("Test", buf);
  }

}

export default BottomPage2;

点击发布信息

就可以收到来自本机的信息了