skip to Main Content

I’m trying to work with an mqtt server for the first time and use it in a react native app (using Expo) that i’m also using for the first time ^^. I’m just trying to create a simple component and store messages for now.
In order to do so, I started a local mqtt server with the command ‘mosquitto’ and tried some exchanges with MQTTX and it worked.

Then, i tried to implement a component in my react native app like so :

import React, { useEffect, useState } from 'react';
import { Client, Message } from 'react-native-paho-mqtt';

const MQTTComponent = () => {
  const [message, setMessage] = useState(''); // Local state to store MQTT message

  useEffect(() => {
    // Create an instance of the MQTT client
    const client = new Client({
      uri: 'mqtt://127.0.0.1:1883',
      clientId: 'testClient',
    });

    // Function to handle received MQTT messages
    const handleMessage = (message) => {
      console.log(`Received message on topic ${message.destinationName}: ${message.payloadString}`);
      setMessage(message.payloadString); // Update the 'message' variable
    };

    // Establish the connection to the MQTT server
    client.connect()
      .then(() => {
        console.log('Connected to MQTT server');
        // Subscribe to an MQTT topic
        client.subscribe('topic');
      })
      .catch((error) => {
        console.error('MQTT connection error:', error);
      });

    // Configure the event handler for MQTT messages
    client.onMessageArrived = handleMessage;

    // Return a cleanup function to unsubscribe and disconnect on unmount
    return () => {
      client.unsubscribe('topic'); // Unsubscribe from the MQTT topic
      client.disconnect(); // Disconnect from the MQTT server
    };
  }, []); // The empty array means this code runs only once on component creation
};

export default MQTTComponent;

However, I get the error :

Error: AMQJS0013E Invalid argument string for uri.

I tried to change the uri but i always get the same error, I really need some help understanding this.

Thank you so much in advance.

2

Answers


  1. The error message you’re encountering, "Error: AMQJS0013E Invalid argument string for uri," typically indicates that there is an issue with the URI you provided when creating the MQTT client. In your code, you’ve specified the URI as 'mqtt://127.0.0.1:1883', which seems correct for a local MQTT server running on the default port.

    Here are a few things to check and try:

    1. Mosquitto Configuration: Ensure that your local Mosquitto MQTT server is up and running and listening on the specified port (1883 by default). You can check its status by running mosquitto -v in your terminal.

    2. Server Address: If you are running your React Native app on a physical device or emulator, make sure that your device can reach your local machine where Mosquitto is running. If you are testing on a physical device, both the phone and your development machine should be on the same local network. If you are using an emulator, ensure that it can reach the local server.

    3. Client ID: The clientId should be unique for each MQTT client. Ensure that you are not using the same clientId for multiple clients.

    4. Protocol: Make sure that the react-native-paho-mqtt library supports the MQTT protocol version used by your Mosquitto server. MQTT has multiple versions (e.g., 3.1.1, 5.0), and library compatibility can vary.

    Here’s a slightly modified version of your code with some additional debugging:

    import React, { useEffect, useState } from 'react';
    import { Client, Message } from 'react-native-paho-mqtt';
    
    const MQTTComponent = () => {
      const [message, setMessage] = useState('');
    
      useEffect(() => {
        const client = new Client({
          uri: 'mqtt://127.0.0.1:1883',
          clientId: `testClient-${Math.random().toString(36).substr(2, 9)}`, // Generate a unique clientId
        });
    
        const handleMessage = (message) => {
          console.log(`Received message on topic ${message.destinationName}: ${message.payloadString}`);
          setMessage(message.payloadString);
        };
    
        client.connect()
          .then(() => {
            console.log('Connected to MQTT server');
            client.subscribe('topic');
          })
          .catch((error) => {
            console.error('MQTT connection error:', error);
          });
    
        client.onMessageArrived = handleMessage;
    
        return () => {
          client.unsubscribe('topic');
          client.disconnect();
        };
      }, []);
    
      return (
        <div>
          <p>MQTT Message: {message}</p>
        </div>
      );
    };
    
    export default MQTTComponent;
    

    If you still face issues after checking the points mentioned above, please provide more details about your development environment and any relevant error messages, and I’ll do my best to assist you further.

    Login or Signup to reply.
  2. The react-native-paho-mqtt is a wrapper round the Paho JavaScript client, which ONLY supports connections that use MQTT over WebSockets.

    See the table at the top of https://eclipse.dev/paho/index.php?page=clients/js/index.php which states "Standard TCP Support" is not supported.

    This is also evident from this line in the code:

    https://github.com/robhogan/react-native-paho-mqtt/blob/9a9d40c76cdc3448180d130110854415de62976e/src/Client.js#L75

        if (!/^(wss?)://(([(.+)])|([^/]+?))(:(d+))?(/.*)$/.test(uri)) {
          throw new Error(format(ERROR.INVALID_ARGUMENT, [typeof uri, 'uri']));
        }
    

    This tests that the URI starts with either ws:// or wss://

    You will need to ensure the broker you are connecting to is configured to support MQTT over WebSockets

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search