MQTT connection fails when using mqtt-react-hooks with React

Question

I'm using mqtt-react-hooks npm library inside my react app to connect to a mqtt server. This is the code I written,

Status.js

import React from 'react';

import { useMqttState } from 'mqtt-react-hooks';

export default function Status() {
  /*
   * Status list
   * - Offline
   * - Connected
   * - Reconnecting
   * - Closed
   * - Error: printed in console too
   */
  const { connectionStatus } = useMqttState();

  return <h6 className='text-muted'>{`MQTT Connection Status: ${connectionStatus}`}</h6>;
}

Dashboard.js

import { Connector } from 'mqtt-react-hooks';
import Status from './Status'

function Dashboard() {
   return (
     
      <Connector brokerUrl="wss://<username>:<password>@68.183.xxx.xxx:1883">
        <Status />
      </Connector>

   )
}

This gives me the following error and couldn't connect to the mqtt server

I tried reading documentation and used the above code. But couldn't connect properly to server. Server requires a username and a password and there is no method mentioned in the documentation to provide it. I used the above mentioned way(wss://username:[email protected]:1883) to provide the username and password. Where is the issue? If you know please drop a comment. Or is there any possible way to achieve this using another method? Thanks!

Answer 1

By default port 1883 is used for native MQTT, normally you can not connect to a broker using MQTT over WebSockets on the same port.

You need to talk to who ever configured the broker and find out what port they have setup the MQTT over (secure) WebSockets listener on and change your URL to match.