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 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. I already follow all the instructions at HiveMq site but the error persists.
