I`m having problems connecting with MQTT

MQTT
1

Hi everyone :D. I have a react app that I need to connect to control an ESP32. The first thing I thought was to use MQTT (HiveMQ) to communicate with the ESP. The problem is that an error is being returned in a loop in my browser console.

WebSocket connection to 'ws://79642a966da549118f1128bb058d42ce.s2.eu.hivemq.cloud:8883/' failed:

If anyone knows what is happening or has any better solution to communicate with the ESP32 using JS it would be incredible too. Follow my index.tsx file

 export default function Home() {
    const options = {
        username: 'gio.nacimento',
        password: 'Gio133ebu',
    };

    const mqtt = require('mqtt');

// connect to your cluster, insert your host name and port
    const client = mqtt.connect('tls://79642a966da549118f1128bb058d42ce.s2.eu.hivemq.cloud:8883', options);

// prints a received message
    client.on('message', function(topic: any, message: any) {
        console.log(String.fromCharCode.apply(null, message)); // need to convert the byte array to string
    });

// reassurance that the connection worked
    client.on('connect', () => {
        console.log('Connected!');
    });

// prints an error message
    client.on('error', (error: any) => {
        console.log('Error:', error);
    });

// subscribe and publish to the same topic
    client.subscribe('messages');
    client.publish('messages', 'Hello, this message was received from the app!');

    const test = (): void =>{
        client.subscribe('messages');
        client.publish('messages', 'Hello, this message was received from the app by clicking!');
    }

    return (
        <div className='flex justify-center items-center flex-col'>
            <h1>Controle de LED</h1>
            <button onClick={test}>Test server</button>
        </div>
    )
}

Don’t know if this can be a problem but I’m using React + Next in my app

2

Hello @Wegx

Welcome to the HiveMQ Community! So first of all the TLS Websocket port on HiveMQ Cloud is 8884

Can you please give it a new try by removing the username and password options in your code and connecting to our public broker to see how your application behaves?

const client = mqtt.connect('ws://broker.hivemq.com:8000', options);

Kind regards,
Diego from HiveMQ Team

1 Like
3

Hi!
I had the exact same problem as you, also using react.
The problem is that the connection string of the host is incomplete and with the wrong port.
Try to change your client variable from this:

// connect to your cluster, insert your host name and port
    const client = mqtt.connect('tls://79642a966da549118f1128bb058d42ce.s2.eu.hivemq.cloud:8883', options);

To this:

// connect to your cluster, insert your host name and port
    const client = mqtt.connect('wss://79642a966da549118f1128bb058d42ce.s2.eu.hivemq.cloud:8884/mqtt', options);

The prefix (wss://) and the sufix (/mqtt) are the most important part.
It should work without changing the options object, but in case that mqtt.js decides to act up, try adding this too in your options object:

    const options = {
        username: 'gio.nacimento',
        password: 'Gio133ebu',
        clientId: `mqttjs_${Math.random().toString(16).substr(2, 8)}`,
    };

I hope this reply is not too late, good luck with your project.

1 Like
4

Thank you so much for your answers, Ema. It worked perfectly fine!