React Native MQTT集成-无法连接代理

4ioopgfo 于 2023-08-07 发布在 React

关注(0)|答案(1)|浏览(132)

我正在使用https://www.npmjs.com/package/react_native_mqtt中的react_native_mqtt来在react原生函数式编程中使用MQTT
集成后无法连接到mqtt服务器可以任何一个帮助它.

import { Stack, StyleSheet, View, FlatList, SafeAreaView,StatusBar,ScrollView } from 'react-native';
import React, { useEffect } from 'react';
import { Button } from '@rneui/base';
import { Text, Divider, useTheme } from '@rneui/themed';
import init from 'react_native_mqtt';
import AsyncStorage from '@react-native-async-storage/async-storage';

const DATA = [{"id":1,"title":"Effect 1"},{"id":2,"title":"Effect 2"},{"id":3,"title":"Effect 3"},{"id":4,"title":"Effect 4"},{"id":5,"title":"Effect 5"},{"id":6,"title":"Effect 6"},{"id":7,"title":"Effect 7"},{"id":8,"title":"Effect 8"},{"id":9,"title":"Effect 9"},{"id":10,"title":"Effect 10"},{"id":11,"title":"Effect 11"},{"id":12,"title":"Effect 12"},{"id":13,"title":"Effect 13"},{"id":14,"title":"Effect 14"},{"id":15,"title":"Effect 15"},{"id":16,"title":"Effect 16"},{"id":17,"title":"Effect 17"},{"id":18,"title":"Effect 18"},{"id":19,"title":"Effect 19"},{"id":20,"title":"Effect 20"},{"id":21,"title":"Effect 21"},{"id":22,"title":"Effect 22"},{"id":23,"title":"Effect 23"},{"id":24,"title":"Effect 24"},{"id":25,"title":"Effect 25"},{"id":26,"title":"Effect 26"},{"id":27,"title":"Effect 27"},{"id":28,"title":"Effect 28"},{"id":29,"title":"Effect 29"},{"id":30,"title":"Effect 30"},{"id":31,"title":"Effect 31"}];

init({
  size: 10000,
  storageBackend: AsyncStorage,
  defaultExpires: 1000 * 3600 * 24,
  enableCache: true,
  reconnect: true,
  sync : {
  }
});

const Item = ({title}) => (
  <View style={styles.buttonsContainer}>
    <Button  title={title}
      containerStyle={{
                width: '90%',
                marginHorizontal: 50,
                marginVertical: 3,
              }}
         />
    <Divider />
  </View>
   
);

const Home = () => {

  useEffect(() => {

    const client = new Paho.MQTT.Client('broker.hivemq.com', 1883,'jee-000001');
   
    console.log ("Welcome MQTT Portal");
    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;
    client.connect({ onSuccess:onConnect, useSSL: false });

  }, []);

  function onConnect() {
    console.log("onConnect");
    client.subscribe("jee/stair/001");
    message = new Paho.MQTT.Message("1");
    message.destinationName = "jee/stair/001";
    client.send(message);
  }
   
  function onConnectionLost(responseObject) {
    if (responseObject.errorCode !== 0) {
      console.log("onConnectionLost:"+responseObject.errorMessage);
    }
  }
   
  function onMessageArrived(message) {
    console.log("onMessageArrived:"+message.payloadString);
  }

  return (
   
    <SafeAreaView style={styles.container}>
    <FlatList
      data={DATA}
      renderItem={({item}) => <Item title={item.title} />}
      keyExtractor={item => item.id}
    />

  </SafeAreaView>
  )
}


export default Home

const styles = StyleSheet.create({
  contentView: {
    flex: 1,
  },
  buttonsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    marginVertical: 3,
  },
  subHeader: {
    backgroundColor : "#2089dc",
    color : "white",
    textAlign : "center",
    paddingVertical : 6,
    marginBottom : 10
  }
  });

字符串
连接方法上没有控制台登录
使用类编程https://github.com/Introvertuous/react-native-mqtt/blob/master/example/MqttLog.js
使用相同的Broket
获取错误{“errorCode”：7、“errorMessage”：“AMQJS 0007 E套接字错误：undefined."，“invocationContext”：未定义的

react-native

来源：https://stackoverflow.com/questions/76118404/react-native-mqtt-integration-not-able-to-connect-broker

1条答案

按热度按时间

t5fffqht1#

使用Functional类

import React, {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useRef,
  useState,
} from 'react';
import { useSnackBars } from './snack';

import AsyncStorage from '@react-native-async-storage/async-storage';
import init from 'react_native_mqtt';
import EventEmitter from "react-native-eventemitter";

init({
  size: 10000,
  storageBackend: AsyncStorage,
  defaultExpires: 1000 * 3600 * 24,
  enableCache: true,
  sync: {}
});

const PREFIX_LOG = 'Mqtt_Provider_CTX: ';

export const options = {
  host: 'broker.hivemq.com',
  port: 8000,
  path: '/mqtt',
  id: 'id_' + parseInt(Math.random() * 100000)
};

//const MqttClientContextx = createContext<IMqttClientContext>({} as IMqttClientContext);
export const MqttClientContext = createContext({});

export const MqttClientProvider = (props) => {
  const children = props.children;

  const [messages, setMessages] = useState('');
  const [loading, setLoading] = useState(true);
  const [topic, setTopic] = useState('jee/stair/001')
  const [subscribedTopic, setSubscribedTopic] = useState('')
  const [message, setMessage] = useState('')
  const [messageList, setMessageList] = useState([])
  const [status, setStatus] = useState(false)
  const [client, setClient] = useState(new Paho.MQTT.Client(options.host, options.port, options.path))

  const {addAlert} = useSnackBars();

  useEffect(() => {
    console.log(PREFIX_LOG+'useEffect');
    if(!status){
      client.onConnectionLost = onConnectionLost;
      client.onMessageArrived = onMessageArrived;
      client.connect({ onSuccess: onConnect, useSSL: false, onFailure: onFailure });
    }
  }, []);

  const onConnect = () => {
    console.log(PREFIX_LOG+'onConnect');
    setStatus(true);
    setClient(client);
    subscribeTopic("jee/watertank/001");
    //sendMessage('jee/stair/001','e_2');
  };

  const onFailure = () => {
    console.log(PREFIX_LOG+'onFailure');
    setStatus(false);
  };

  const onConnectionLost = (responseObject) => {
    if (responseObject.errorCode !== 0) {
      setStatus(false);
      client.connect({ onSuccess: onConnect, useSSL: false, onFailure: onFailure });
      console.log("onConnectionLost: " + responseObject.errorMessage);
    }
  };

  const onMessageArrived = (message) => {
    //console.log(message.destinationName);
    //console.log(PREFIX_LOG+'onMessageArrived: ' + message.payloadString);
    if(message.destinationName=='jee/watertank/001'){
      EventEmitter.emit("watertankStatus", Number(message.payloadString));
    }
  };

  const subscribeTopic = (topic) => {
    console.log(PREFIX_LOG+'subscribeTopic: ' + topic);
    client.subscribe(topic, { qos: 0 });
  };

  const sendMessage = (topic,data) => {
    //console.log(PREFIX_LOG+'sendMessage');
    //console.log('topic: '+topic + '      data: '+ data);
    var message = new Paho.MQTT.Message(data);
    message.destinationName = topic;
    client.send(message);
  }

  const theValues = {
    loading,
    onConnect,
    onMessageArrived,
    sendMessage,
    subscribeTopic

  };

  return (
    <MqttClientContext.Provider value={theValues}>
      {children}
    </MqttClientContext.Provider>
  );
}

export function mqtt() {
  const context = useContext(MqttClientContext);

  return context;
}

字符串

赞(0）回复(0）举报 2023-08-07

我来回答

React Native MQTT集成-无法连接代理

1条答案

相关问题

热门标签

最新问答