需要帮助在浏览器中将 MQTT 与 Ably 结合使用答案

【问题标题】：Need help using MQTT with Ably from the Browser需要帮助在浏览器中将 MQTT 与 Ably 结合使用
【发布时间】：2020-05-11 04:31:02
【问题描述】：

我在 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

【问题讨论】：

标签： javascript typescript mqtt ably-realtime

【解决方案1】：

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

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

【讨论】：

啊，所以在这种情况下我应该考虑使用 Ably 的 MQTT 协议适配器。谢谢！（我完全忘记了我在 2 年前已经将 Mosquitto 服务器配置为接受 WebSockets）

【解决方案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 函数中发送消息。

【讨论】：