Javascrip paho webclient with hivemq account URI not working

[dro2]

Hi,

sorry to come up with this question, as it should have been asked already, but after hours of searching, I have not found the solution.

I would like to add a mqtt web broker on a Internet webpage, using paho javascript module. I have downloaded this version:

eclipse/paho.mqtt.javascript/blob/master/src/paho-mqtt.js

I managed to connect to the public server using:

var client = new Paho.Client('broker.hivemq.com', 8000, 'mqtt' );
client.connect({
  onSuccess:function(){
      console.log('Connected');
      client.subscribe('test_web');
  }
}); 

but I don’t manage to connect through my free hivemq account, with:

var client = new Paho.Client('[the correct ID].s2.eu.hivemq.cloud', Number(8884), '/mqtt', 'text');
client.connect({
  onSuccess:function(){
      console.log('Connected');
      client.subscribe('test_web');
  }
}); 

Firefox dev page indicates:

Firefox can’t connect to ws://[the correct ID].s2.eu.hivemq.cloud:8884/mqtt.

could you please provide a working examples in this case?

the HiveMQ article on this topic is from 2015 and probably too old.

Paho JavaScript - MQTT Client Library Encyclopedia

I thank you very much !

[Daria_H]

Hi @dro2
I hope you’re doing well? I noticed you’re working on connecting your Paho JS client to the HiveMQ Cloud Cluster. It seems like you’ve got the right hostname and port, but there might be a small oversight regarding SSL usage.

In your first example with “broker.hivemq.com” and port 8000, it’s an unsecured (not encrypted) WebSocket, hence it doesn’t require SSL, which is why your first example is working.

However, in your second example with the HiveMQ Cloud Broker and port 8884, it’s a secure (encrypted) WebSocket, and it requires SSL. This might be the reason your second example isn’t functioning as expected.

After checking the source code of your paho-mqtt.js client at paho.mqtt.javascript/src/paho-mqtt.js at master · eclipse/paho.mqtt.javascript · GitHub, I recommend trying to enable SSL by setting “clientOptions.useSSL = true” in your client.

I hope this information proves helpful. If you have any questions or need further clarification, feel free to ask. Good luck with your project!

Dasha from HiveMQ Team

[dro2]

Hi,

thank you for your quick reply. I couldn’t manage to use your suggestion, but after some additional search on Internet I found the following article:

correct way to instantiate Paho Client in JavaScript for wss (secure...

it works now in the following version:

<script type='text/javascript' src='paho-mqtt.js'></script>

<script>
var client = new Paho.Client("wss://[alphanumeric code].s2.eu.hivemq.cloud:8884/mqtt", "i");
client.connect({
   userName : "userid",
   password : "password",
   onSuccess:function(){
      console.log('Connected');
      client.subscribe('/test_web');
      message = new Paho.Message("Hello");
      message.destinationName = "/test_web";
      client.send(message); 
   }
 }); 

After loading the page, I receive the message on the HiveMQ webclient and I manage to receive on the html page the message after having added the right client.onMessageArrived function.

Thank you again for your answer.

have a nice day!