[SOLVED] MQTT.js wss connection failed in browser

MQTT.js wss connection failed in browser

I am coding a browser app by using the react framework. In this app mqtt topics are subscribed. I am using the MQTT.js package. If I am running the app in the browser (Edge and Firefox tested) by using an https connection I am forced to using secure websocket (wss) connections. If I am forcing the browser to use an http connection the websocket connection (ws) works fine. But with wss the connection fails:

WebSocket connection to 'wss://serveradress.tld:8084/mqtt' failed

The wss connection to the broker works also fine from a standalone MQTT client (MQTTX). But it does not work from an webclient like hivemq or mqttx web either.

Here my code for connecting the mqtt broker:

var mqtt = require('mqtt/dist/mqtt');
var mqttOptions = {
  protocol:  'wss',
  keepalive: 20,
  clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),
  path: "/mqtt/,
  rejectUnauthorized: false
};
const mqttUrl = "wss://serveradress.tld:8084";

var mqttClient = mqtt.connect(mqttUrl, mqttOptions);

I do not need to verify the certificates because I am running the connection in a closed network. I am thinking, that the option "rejectUnauthorized: false" accepts this?

Any recommendations how I can debug this? Thank in advance!

nico

Solution

Finally it was a fault in the broker configuration. The broker (EMQX) was not using the correct certificates because the listener was only defined for the SSL connection on port 8883. After defining the path to the certificates for the WSS listener, the connection was successfully established.