Need help using MQTT with Ably from the Browser

Question

I am using the paho-mqtt library in a SPA running in Chrome and calling the connect with the example code and am getting two alternating errors

var client = mqtt.connect('mqtts:mqtt.ably.io', {
  keepalive: 30,
  username: 'keyPartA1.artA2',
  password: 'keyPartB',
  port: 8883
});

The errors repeat, not always in the same order...

stream.js?553e:64 WebSocket connection to 'ws://mqtt.ably.io:8883/' failed: Connection closed before receiving a handshake response
    WebSocketStream @ stream.js?553e:64
    createWebSocket @ ws.js?fcb9:59
    buildBuilderBrowser @ ws.js?fcb9:85
    wrapper @ index.js?e7fc:148
    MqttClient._setupStream @ client.js?df86:263
    MqttClient._reconnect @ client.js?df86:847
    eval @ client.js?df86:862
stream.js?553e:64 WebSocket connection to 'wss://mqtt.ably.io:8883/' failed: Connection closed before receiving a handshake response
    WebSocketStream @ stream.js?553e:64
    createWebSocket @ ws.js?fcb9:59
    buildBuilderBrowser @ ws.js?fcb9:85
    wrapper @ index.js?e7fc:148
    MqttClient._setupStream @ client.js?df86:263
    MqttClient._reconnect @ client.js?df86:847
    eval @ client.js?df86:862
stream.js?553e:64 WebSocket connection to 'ws://mqtt.ably.io:8883/' failed: Error during WebSocket handshake: net::ERR_CONNECTION_RESET
    WebSocketStream @ stream.js?553e:64
    createWebSocket @ ws.js?fcb9:59
    buildBuilderBrowser @ ws.js?fcb9:85
    wrapper @ index.js?e7fc:148
    MqttClient._setupStream @ client.js?df86:263
    MqttClient._reconnect @ client.js?df86:847
    eval @ client.js?df86:862

score 1 · Accepted Answer · answered Jan 24 '20 at 21:02

1

Firstly the URI should start with a proper schema, e.g. mqtts:// not just mqtts:

Secondly, and the bit that is actually the cause of your problem, you can ONLY connect to a websocket or secure websocket enabled broker from within the browser. You CAN NOT connect to a native MQTTS broker from within a page. It looks like Ably's broker is expecting native MQTTS on port 8883, not MQTT over Websockets.

answered Jan 24 '20 at 21:02

hardillb

54,545
11
67
105

Ah, so I should look to use Ably's MQTT protocol adapter in this case. Thank you! (I had quite forgotten that I had configured our Mosquitto server to accept WebSockets 2yrs ago) – Al Joslin Jan 24 '20 at 22:27

score 0 · Answer 2 · answered Jun 23 '21 at 11:22

You’ll be getting this as the browser only support MQTT over WebSockets, not over just native MQTT. Ably’s MQTT broker only supports native MQTT so this will fail.

It is possible however to connect to Ably with either WebSockets using one of the client libraries, or SSE. Even if data is being published into Ably using MQTT from some devices you have, Ably will convert between protocols and distribute the data in whatever protocol you subscribe with. For example, if you wanted to subscribe to the data over SSE, you could just use:

var key ='YOUR_ABLY_API_KEY';
var url ='https://realtime.ably.io/event-stream?channels=myChannel&v=1.2&key=' + key;
var eventSource = new EventSource(url);
eventSource.onmessage = function(event) {
  var message = JSON.parse(event.data);
  console.log('Message: ' + message.name + ' - ' + message.data);
};

This will subscribe you to an Ably channel, with messages coming through on in the onmessage function.

Need help using MQTT with Ably from the Browser

2 Answers2