Error in WebSocket Connection for MQTT Over HTTPS

[CD-rajveer]

I'm encountering an issue when trying to connect to an MQTT broker using WebSocket (ws://) from a website served over HTTPS. The browser throws an error:

Error in uploadConfig function: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

Environment
MQTT Broker: Hosted at mqtt://IP_ADDRESS:PORT (non-secure WebSocket).
Frontend: Hosted on URL Via HTTPs
Nginx Configuration: Serves frontend over HTTPS but proxies WebSocket traffic to an insecure broker (ws://)

Potential Solutions Attempted
Configured Nginx as a reverse proxy but failed to establish wss:// successfully.
Considered direct MQTT broker configuration changes to enable wss://, but this requires additional SSL setup.

[robertsLando]

Please provide the script you are using to connect, I have a feel you are using ws instead of wss here

[CD-rajveer]

      console.log("Final Payload:", payload);
      console.log("Final Payload (Parsed):", JSON.parse(payload));

      const mqttBrokerUrl = `wss://${selectedDevice?.ip_address}:{port}`;


     
      console.log("MQTT IP set dynamically: ", mqttBrokerUrl);
      const client = mqtt.connect(mqttBrokerUrl, options);

      client.on("connect", () => {
        console.log("MQTT client connected");

        client.publish(mqtt_topic, payload, (error) => {
          if (error) {
            console.error("Error publishing to MQTT:", error.message);
            setPushConfigSnackbar({
              open: true,
              message: "Failed to publish configuration.",
            });
            client.end(); // Close connection on error
            return;
          }

I have used wss as well but I guess broker should support wss

[robertsLando]

I see a typo here:

      const mqttBrokerUrl = `wss://${selectedDevice?.ip_address}:{port}`;

Should be:

      const mqttBrokerUrl = `wss://${selectedDevice?.ip_address}:${port}`;

Also yeah your broker should support wss

[CD-rajveer]

Yeah, I fixed that typo, I will check the broker side