在浏览器中使用 MQTT 和 Ably 需要帮助

Question

我在 Chrome 中的 SPA 运行中使用 paho-mqtt 库并使用示例代码调用连接，我收到两个交替错误

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

错误重复出现，顺序并不总是相同...

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

Answer 1

首先，URI 应该以正确的模式开头，例如mqtts:// 不仅仅是 mqtts:

其次，实际上是您问题的原因，您只能从浏览器中连接到 websocket 或启用安全 websocket 的代理。您不能从页面内连接到本机 MQTTS 代理。看起来 Ably 的代理期望端口 8883 上的本机 MQTTS，而不是基于 Websockets 的 MQTT。

Answer 2

你会得到这个，因为浏览器只支持基于 WebSockets 的 MQTT，而不是仅支持原生 MQTT。 Ably 的 MQTT 代理仅支持本机 MQTT，因此这将失败。

但是，可以使用其中一个客户端库或 SSE 通过 WebSockets 连接到 Ably。即使数据从您拥有的某些设备使用 MQTT 发布到 Ably，Ably 也会在协议之间进行转换并以您订阅的任何协议分发数据。例如，如果您想通过 SSE 订阅数据，您可以使用：

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);
};

这将为您订阅一个 Ably 频道，并在 onmessage 函数中发送消息。

在浏览器中使用 MQTT 和 Ably 需要帮助

Need help using MQTT with Ably from the Browser

javascript

mqtt

typescript

ably-realtime