与 React Native 的 Mqtt 连接

Question

I am currently making an IoT App that I'm trying to connect to sensors using MQTT. I use the react_native_mqtt package. What I'm trying to achieve is to connect and get the data of topic sent by sensor. but the code unfortunately not working. so What should I update in the app.js file to test the MQTT connection?

Any help is appreciated.

import init from 'react-native-mqtt'
    const host = '55.122.xx.xx'


  const port = '1883'
    const clientId = `mqtt_${Math.random().toString(16).slice(3)}`
    const connectUrl = `mqtt://${host}:${port}`
    init({
          size: 10000,
          defaultExpires: 1000 * 3600 * 24,
          enableCache: true,
          sync: {},
       });
    export default class TestScreen extends Component {
    
      constructor(){
    super();
    this.onMessageArrived = this.onMessageArrived.bind(this)
    this.onConnectionLost = this.onConnectionLost.bind(this)


    const client = new Paho.MQTT.Client(connectUrl, port, clientId,);
    client.onMessageArrived = this.onMessageArrived;
    client.onConnectionLost = this.onConnectionLost;
    client.connect({ 
      onSuccess: this.onConnect,
      useSSL: false ,
      userName: 'User',
      password: 'Pass',
      onFailure: (e) => {console.log("here is the error" , e); }

    });

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

  }


  onMessageArrived(entry) {
    console.log("onMessageArrived:"+message.payloadString);
    this.setState({message: [...this.state.message, entry.payloadString]});

  }


  onConnect = () => {
    const { client } = this.state;
    console.log("Connected!!!!");
    client.subscribe('hello/world');
    this.setState({isConnected: true, error: ''})
  };


  sendMessage(){
    message = new Paho.MQTT.Message(this.state.messageToSend);
    message.destinationName = "hello/world";

    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}>
      <Text style={styles.welcome}>
          Welcome to React Native MQTT!
        </Text>
        <Text style={styles.instructions}>
          Message: {this.state.message.join(' --- ')}
        </Text>
        <Text style={{color: 'red'}}>
          {this.state.error}
        </Text>
        { this.state.isConnected ?
            <Text style={{color: 'green'}}>
              Connected
            </Text> : null
        }
        <TextInput
          value={this.state.messageToSend} 
          onChangeText={(value => this.setState({messageToSend: value}))} 
          placeholder="Type hereee..."
          style={styles.input} />
        <Button onPress={this.sendMessage.bind(this) } title="Send Message" />

      </View>
    );
  }


}

Error:

TypeError: (0, _reactNativeMqtt.default) is not a function. (In '(0, _reactNativeMqtt.default)({
    size: 10000,
    defaultExpires: 1000 * 3600 * 24,
    enableCache: true,
    sync: {}
  })', '(0, _reactNativeMqtt.default)' is an instance of Object)

Answer 1

This will not offer you a solution, just some hints which may or may not be helpful, but it's just too long to place in a comment.

1. This line: const client = new Paho.MQTT.Client(connectUrl, port, clientId,); I don't see Paho defined anywhere. You import MQTT .

2. You refer to another answer, but that was using a different MQTT library -- react_native_mqtt , and you're using react-native-paho-mqtt

3. The Client constructor is documented to take 4 arguments, and you supply 3 and there's a dangling comma. Was it a typo?

4. You can find perhaps a better example of client instantiation on this npm page .