Configuring MQTT JavaScript client for cloudmqtt.com

Overview

I had to struggle to make my MQTT Javascript code to work in a browser.  So here it is.

• I am using the provider free plan from CloudMqtt.com

1. Create a MQTT broker using the free plan 
2. I used the Websockets Port 
3. The url must be formatted this way: 'wss://m15.cloudmqtt.com'
4. In the connection options, useSSL must be true

this._options = {
    port: webSocketPort, // Required for WebSocket
    useSSL: true,        // Required for WebSocket
    host: mqttUrl,
    clientId,
    username,
    password,
    keepalive: 60,
    reconnectPeriod: 1000,
    protocolId: 'MQIsdp',
    protocolVersion: 3,
    clean: true,
    encoding: 'utf8'
};

this._client = mqtt.connect(this._options.host, this._options);

Source code

Here the full source code for JavaScript and C#. The Javascript code was testing on

Chrome Windows and iOS, Edge and IE11.

• JavaScript mqttManager.js
• C# MQTTManager.cs

All project MQTTManager on Github