[MQTT Web Client] Direct MQTT vs MQTT over WebSockets

Forge Component
(7)
Published on 2019-06-05 by Barduino
7 votes
Published on 2019-06-05 by Barduino

Currently I have a raspberry Pi publishing MQTT messages thru port 8883 instead of port 8081 (which is for MQTT over Websockets). I have a MQTT broker setup as well.

I tried using the example code - Test Connection by changing the Host and Port to receive but is not able to receive the data. What settings should I make to subscribe the data from this setup?

https://stackoverflow.com/questions/30624897/direct-mqtt-vs-mqtt-over-websocket

Hi Chris,

You are I think posting in a wrong forum. This forum is for OutSystems questions.

I see nothing in your post regarding OutSystems.

Regards,

Daniel

Hi Daniel, 

Sorry probably I didn't phrase my question well. I am trying to use Outsystems to create a webapp to subscribe to the MQTT messages published from a raspberry pi. I tried the test connection example in the forge for MQTT web client to test it but was not able to subscribe the message.

Regards

Chris 

Hi Chris,

Are you running your OutSystems application in the cloud? If so is your  MQTT broker connected/reachable.from the cloud? 

regards,

Daniel

Yes I am running my outsystems application in the cloud. My MQTT broker is reachable from the cloud as well and is hosted in AWS. I have tested the messages with my raspberry Pi with a separate MQTT test app over the cloud and it works. Now I wanted to test with my Outsystems app.

 Do you get a error message, or errors logged in service center error log?

There is this message that appear at the top of the "TestConnection" screen:

"Use http to connect to non SSL brokers. Open browser console for more logs"

The settings are as shown here:

I opened the browser console and have these logs:


Fail to connect: AMQJSC0001E Connect timed out.
pahoLib.js?665:1046 WebSocket connection to 'wss://broker.hivemq.com:8000/mqtt' failed: Error in connection establishment: net::ERR_CONNECTION_CLOSED
LibraryFactory.ClientImpl._doConnect @ pahoLib.js?665:1046
pahoLib.js?665:1046 WebSocket connection to 'wss://broker.hivemq.com:1883/mqtt' failed: Error in connection establishment: net::ERR_CONNECTION_CLOSED
LibraryFactory.ClientImpl._doConnect @ pahoLib.js?665:1046
LibraryFactory.ClientImpl.connect @ pahoLib.js?665:881
Client.connect @ pahoLib.js?665:2004
connect @ HiveMQ.js?665:62
eval @ VM80:2
(anonymous) @ _osjs.js?11_0_606_0:18
globalEval @ _osjs.js?11_0_606_0:18
OsEvaluateUserJavaScript @ _osjs.js?11_0_606_0:5
OsExecuteJSONUpdate @ _osjs.js?11_0_606_0:5
OsJSONUpdate @ _osjs.js?11_0_606_0:5
eval @ VM79:2
XHRState.ProcessNextScriptBlock @ _osjs.js?11_0_606_0:65
XHRState.ProcessPartialResponse @ _osjs.js?11_0_606_0:65
c @ _osjs.js?11_0_606_0:65
(anonymous) @ _osjs.js?11_0_606_0:42
pahoLib.js?665:1044 WebSocket connection to 'wss://broker.hivemq.com:1883/mqtt' failed: Error in connection establishment: net::ERR_CONNECTION_CLOSED
LibraryFactory.ClientImpl._doConnect @ pahoLib.js?665:1044
LibraryFactory.ClientImpl._disconnected @ pahoLib.js?665:1611
LibraryFactory.ClientImpl._on_socket_error @ pahoLib.js?665:1447
(anonymous) @ pahoLib.js?665:170
HiveMQ.js?665:74 Fail to connect: AMQJS0007E Socket error:undefined.
pahoLib.js?665:1044 WebSocket connection to 'wss://broker.hivemq.com:8000/mqtt' failed: Error in connection establishment: net::ERR_CONNECTION_CLOSED
LibraryFactory.ClientImpl._doConnect @ pahoLib.js?665:1044


I am using HiveMQ client connecting to HiveMQ broker here: http://www.hivemq.com/demos/websocket-client/

Host: broker.hivemq.com

Port: 8000

In the TestConnection Screen, I tested connecting to Port 8000 and 1883 but both failed.

I've checked the Service Center for any error logs but there is none.

Solution

Chris Chua wrote:

There is this message that appear at the top of the "TestConnection" screen:

"Use http to connect to non SSL brokers. Open browser console for more logs"

The settings are as shown here:

<snip>

I am using HiveMQ client connecting to HiveMQ broker here: http://www.hivemq.com/demos/websocket-client/

Host: broker.hivemq.com

Port: 8000

In the TestConnection Screen, I tested connecting to Port 8000 and 1883 but both failed.

I've checked the Service Center for any error logs but there is non

Hi Chris,

So looking at the hivemq demos on your link they are pointing to broker.mqttdashboard.com:8000 without SSL

So if you open the demo app of this component at http://barduino.outsystemscloud.com/mqttWebDemo/TestConnection.aspx

and configure it the same way like this


and then connect and subscribe and send some messages its working fine:


So what could be wrong when you try to connect to your broker (assuming broker.hivemq.com)

The ports must match the protocol, consult the documentation from the broker, for example testmosquitto.org exposes this:

  • 1883 : MQTT, unencrypted
  • 8883 : MQTT, encrypted
  • 8884 : MQTT, encrypted, client certificate required
  • 8080 : MQTT over WebSockets, unencrypted
  • 8081 : MQTT over WebSockets, encrypted

So in order to use this on a web browser only ports 8080 or 8081 work since web browsers can only use web sockets.

However it must also match the HTTP protocol you're using, you can not have mixed http and https on the same page, so usually on an Outsystems app it default to https so you need in the above case port 8081.

If you look at the OutSystems MQTT component test page notice that I switched to HTTP and unselected the SSL for it to work with hivemq demo broker since the demo does not support SSL/TLS.

So play a bit with the options, it will work!

Cheers




Solution

Thanks Barduino! By unchecking the ssl works now! I can see the correct published message on another app mqtt.fx but the Incoming Messages showed in the Test Connection screen shows the message as undefined - undefined


Chris Chua wrote:

Thanks Barduino! By unchecking the ssl works now! I can see the correct published message on another app mqtt.fx but the Incoming Messages showed in the Test Connection screen shows the message as undefined - undefined


I found the problem. I changed the code in the Subscribe logic from "x.innerHTML =message.destinationName+' - '+ message.payloadString + '<br>'+x.innerHTML;" 

to 

"x.innerHTML =message.topic +' - '+ message.payload + '<br>'+x.innerHTML;"

and it works now. Thanks for helping me. Cheers!