CODEWITHSUNDEEP
javascriptwebsocketmqttpahobroker
Göktuğ Ozleyen
Göktuğ Ozleyen

Reputation: 121

How can i fix Mixed Content issue in mqtt?

I need to connect to broker over websocket. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
<script>
    // Create a client instance
    client = new Paho.MQTT.Client("broker.hivemq.com", 8000, "" , "gokden");


    // connect the client
    client.connect({onSuccess:onConnect}); 

    function onConnect(){
        console.log("Connected!");
    }

</script>

This is my connection code but i get this error:

mqttws31.min.js:36 Mixed Content: The page at 'karantinagunlugum.com' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://broker.hivemq.com:8000/'. This request has been blocked; this endpoint must be available over WSS.

Upvotes: 0

Views: 2129

Answers (1)

hardillb
hardillb

Reputation: 59751

You have 2 related but separate problems here.

  1. broker.hivemq.com doesn't support Secure MQTT over Websockets (wss://) which is why the connection is being closed after 30 seconds when you try to connect
  2. You are trying to connect from a page that was loaded over HTTPS. Pages loaded securely can not connect to insecure resources due to the secure origin policy in the browser, this is what the second error is telling you.

You have 2 choices

  1. Turn off HTTPS for your site. This is not a good idea.
  2. Setup your own broker that supports Secure MQTT over Websockets.

You shouldn't really be using broker.hivemq.com for anything other than basic testing and playing, if you want to do anything serious you should be either paying for a properly hosted broker or running your own.

Upvotes: 1

Related Questions