MQTT instead of wss on browser

Question

When I run this code with nodejs, it works fine both on wss(code commented) and mqtts protocol. However if I run this on browser, it only works with wss. I tried bundling with browserify; I tried using cdn but no luck with mqtt protocol. I want to use mqtt protocol because data is not realtime in wss protocol.

const mqtt = require('mqtt');
const client = mqtt.connect("mqtts://mqtt.some.com", {
    username: "some",
    password: "somepassword",
    port: 8883,
});

// const client = mqtt.connect("wss://mqtt.some.com", {
//   username: "some",
//   password: "somepassword",
//   port: 8083,
// });

client.on('connect', () => {
    console.log('connected');
    client.subscribe('body_data/1/91', { qos: 1 })
});

client.on('message', function (topic, message, packet) {
    console.log("=====================================================================");
    console.log(message.toString(), new Date(Date.now()).toUTCString());
});

Here's the error I get when running mqtt protocol on browser

Answer 1

You can ONLY use WebSocket based connections from the browser.

The browser's JavaScript sandbox will only allow HTTP based protocols (WebSockets bootstrap over HTTP) so it will always fail if you try to use a native TCP socket.

There should be absolutely no difference in message delivery when connecting via MQTT over WebSockets Vs native MQTT