javascript - Connecting Reactjs project to mqtt using MyQttHub

Question

I need some help in connecting my react project to myqtt hub to publish and receive data. this is the code I'm using:

import React, { Component } from 'react';

var mqtt = require('mqtt');

var options={
    clientId:"id",
    username:"ArduinoProject",
    password:"ssssss",
    protocolId: "MQTT",
    protocolVersion: 4,
  
     port : 1883 ,
    clean:true};
    var client = mqtt.connect("mqtt://node02.myqtthub.com/",options)

client.on('connect', () => {
    alert('Connected!');
   
    console.log('Connected');
});

client.publish('testingfromnode','Dou You see mee?');

console.log(client.clientId);
console.log(JSON.stringify(client.options));


class Garage extends Component {
   
   
    render() {
        return (
            <div>
                <h1>HEllooo</h1>
            </div>
        );
    }
}

export default Garage;

For some reason I'm having an error saying: WebSocket connection to 'ws://node02.myqtthub.com:1883/' failed: Connection closed before receiving a handshake response.

The HTML I wrote is appearing however I'm not able to connect to the mqtt broker.

question from:https://stackoverflow.com/questions/66061547/connecting-reactjs-project-to-mqtt-using-myqtthub

Answer 1

I see you've already posted the question HERE and this one should be closed as duplicate, but I suppose you're desperate for an answer at this point. Where did you get the port value of 1883 from? I suppose you just copied it from the sample JD Allen have provided in the comments. Ofcourse it is not gonna work, it was just a sample value.

So, according to their Official guide for Node-Red you should be using port 8883. Also, I am pretty sure your clientId is not id, you should fetch that from your hub.

If you're still getting an error related to the handshake, you're most probably having protocol version mismatch on your server and client. Checkout the docs for the npm package and more specifically the section about web sockets.

This should pretty much solve the handshake problem. From then on, you'll have other issues as you're not subscribing to any topics in your code. Once again, check the mqtt's package docs.

This question should help you as well: MQTT.js not connecting from websockets.