使用 React Native 的 MQTT 响应

Question

我目前正在制作一个 IoT 应用程序，我正在尝试使用 MQTT 连接到 raspberry pi。我使用 react_native_mqtt 包。我使用代码 posted by simaAttar from here: How to use MQTT on React Native? 。我遇到的问题是，当我更改并保存代码时，它并不总是更新我的代码。我想要实现的是从 rasp 接收一个 JSON 格式的字符串，并使用它来填充具有 react-native-elements ListItem 的 FlatList。但是收到的数据是undefined的，虽然昨天我确实让它工作了一秒钟，但是现在它不再工作了。

感谢任何帮助。

编辑：这是代码（忘了 post 它）

import React, {Component} from 'react';
import init from 'react_native_mqtt';
import AsyncStorage from '@react-native-community/async-storage';
import {
  ActivityIndicator,
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableOpacity,
  TextInput,
  Button,
  Alert,
} from 'react-native';
import {ListItem} from 'react-native-elements';

init({
  size: 10000,
  storageBackend: AsyncStorage,
  enableCache: true,
  sync: {},
});

export default class AllPeople extends Component {
  constructor() {
    super();
    this.onMessageArrived = this.onMessageArrived.bind(this);
    this.onConnectionLost = this.onConnectionLost.bind(this);

    const client = new Paho.MQTT.Client(
      'onto.mywire.org',
      8080,
      'Client-' + Math.random() * 9999 + 1,
    );
    client.onMessageArrived = this.onMessageArrived;
    client.onConnectionLost = this.onConnectionLost;
    client.connect({
      onSuccess: this.onConnect,
      useSSL: false,
      onFailure: (e) => {
        console.log('Error: ', e);
      },
    });

    this.state = {
      message: [''],
      data: [],
      isLoading: true,
      client,
      messageToSend: '',
      isConnected: false,
    };
  }

  onConnect = () => {
    console.log('Connected');
    const {client} = this.state;
    client.subscribe('/app/to/allpeople');
    this.setState({
      isConnected: true,
      error: '',
      isLoading: true,
      messageToSend: 'allpeople',
    });
    this.sendMessage();
  };

  onMessageArrived(entry) {
    console.log("Nieuwe Test 1:")
    console.log("PayloadMEssage: "+entry.payloadMessage);
    console.log("Payload tostring: "+entry.payloadMessage.toString())
    //this.setState({data: entry, isLoading: false});
  }

  sendMessage = () => {
    console.log('message send.');
    var message = new Paho.MQTT.Message(this.state.messageToSend);
    message.destinationName = '/app/from';

    if (this.state.isConnected) {
      this.state.client.send(message);
    } else {
      this.connect(this.state.client)
        .then(() => {
          this.state.client.send(message);
          this.setState({error: '', isConnected: true});
        })
        .catch((error) => {
          console.log(error);
          this.setState({error: error});
        });
    }
  };

  onConnectionLost(responseObject) {
    if (responseObject.errorCode !== 0) {
      console.log('onConnectionLost:' + responseObject.errorMessage);
      this.setState({error: 'Lost Connection', isConnected: false});
    }
  }

  render() {
    return (
      <View style={styles.container}>
        {this.state.isLoading ? (
          <ActivityIndicator />
        ) : (
          <FlatList
            keyExtractor={keyExtractor}
            data={this.state.data}
            renderItem={Item}
          />
        )}
      </View>
    );
  }
}

const keyExtractor = (item, index) => login.username.toString();

const Item = ({item}) => {
  return (
    <TouchableOpacity>
      <ListItem
        title="TestTitle" //{item.results.name.first}
        titleStyle={{fontWeight: 'bold'}}
        leftIcon={<MCIcons name="account" size={36} color="dodgerblue" />}
        subtitle={item.results.name.last}
        rightTitle={item.results.registered.date}
        rightTitleStyle={{fontSize: 14}}
        chevron
        bottomDivider
      />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF',
  },
});

Answer 1

我已通过将 entry.payloadMessage 更改为 entry.payloadString 来修复它。显然我在编辑代码时更改了它。

使用 React Native 的 MQTT 响应

MQTT Response with React Native

json

mqtt

reactjs

react-native

react-native-android