CODEWITHSUNDEEP
reactjswebsocketmqttaedes
Tony
Tony

Reputation: 583

How to use MQTT over websocket in Reactjs?

I use aedes create server like this:

const aedes = require('aedes')()
const httpServer = require('http').createServer()
const ws = require('websocket-stream')
const port = 8888

ws.createServer({ server: httpServer }, aedes.handle)

httpServer.listen(port, function () {
  console.log('websocket server listening on port ', port)
})

This code run ok at port 8888. After that with mqtt-react-hooks in Reactjs, I created file:

import React from 'react';

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

export default function App() {
const { connectionStatus } = useMqttState();
  return (
    <Connector brokerUrl="mqtt://domain.com:8888">
        <h1>{`Status: ${connectionStatus}`}</h1>
    </Connector>
  );
}

Error happen: It show Status: undefined. Web broken and overload. I try to use MQTT over websocket on web browser, so is that need another setup ?

Update:

I use tls so It must be use with key,cert,ca. Use that code above, browser send status force use wss. And I change server file like below:

const fs = require('fs');
const aedes = require('aedes')();
var wsSslPort = 8888;
var ws = require('websocket-stream');
// WsSsl server
var wsSslServer = require('https').createServer({
    key: fs.readFileSync("cert/key.pem"),
    cert: fs.readFileSync("cert/crt.pem"),
    requestCert: false, // client send their certificate
    rejectUnauthorized: false,
    ca: [ fs.readFileSync("cert/ca.ca") ]
}, aedes.handle);

wsSslServer.listen(wsSslPort, "domain.com", function () {
  console.log('MQTT websocket tls server listening on port', wsSslPort)
});

This code run ok.

Also I change client file:

    import React from 'react'; 
    var optionsMqtt={
      clientId: uuidv4(),
      rejectUnauthorized : false,
      ca: cert_mqtt.ca_mqtt,
      key: cert_mqtt.key_mqtt,
      cert: cert_mqtt.crt_mqtt
    }
    const websocketUrl = "wss://domain.com:8888";
    export default function App() {
      const client = mqtt.connect(websocketUrl,optionsMqtt);
      client.stream.on("error", (err) => {
        console.log(`Connection to ${websocketUrl} failed`);
        client.end();
      });
    client.on('connect', function () {
      console.log('Connected');
    });
    return (
        <>
            <h1>TEST</h1>
        <>
      );
    }

Still error:

ws.js:108 WebSocket connection to 'wss://domain.com:8888/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

I also turn off firewall,open port 8888.

Upvotes: 0

Views: 2427

Answers (1)

hardillb
hardillb

Reputation: 59771

You've explicitly told the client to use native MQTT by using the mqtt:// schema in the URL.

Change it to ws://

Upvotes: 2

Related Questions