MQTT JavaScript client not connecting (wrong protocol?)

Question

I am trying really hard to make my MQTT client work inside my application. The broker is provided by CloudMQTT .

When trying to run the following code in NodeJS, the client connects properly to MQTT;

var mqtt = require('mqtt');

var client = mqtt.connect(
        "mqtt://m20.cloudmqtt.com",
        {
            port: 11212,
            username: "XXXXXXXX",
            password: "XXXXXXXX"
        }
);

client.on('connect', function () {
    console.log('connected');
});

However, when I run the same code (without the require of course) in the frontend using the Bower package , the client does not connect. I have also tried other MQTT browserfied JS packages. I prefer MQTT.js and not Paho, because I would like to use multiple subscribes with one connected client.

If console.log(client); , NodeJS uses protocol: 'mqtt' and protocolId: 'MQTT' . The frontend uses protocol: 'ws' and protocolId: 'MQTT' . Could this be the problem? Adding these options to mqtt.connect has no effect.

Answer 1

From with in the browser the only option is going to be to connect via MQTT over Websockets. CloudMQTT use different port numbers for native MQTT and MQTT over websockets so you will need to also change the port number for the browser based code to the Websocket port listed in your CloudMQTT dashboard.