浏览器中MQTT.js wss连接失败

Question

我正在使用 React 框架编写浏览器应用程序。在此应用程序中订阅了 mqtt 主题。我正在使用 MQTT.js 包。如果我使用 https 连接在浏览器（Edge 和 Firefox 测试）中运行应用程序，我将被迫使用安全的 websocket (wss) 连接。如果我强制浏览器使用 http 连接，则 websocket 连接 (ws) 工作正常。但使用 wss 连接失败：

WebSocket connection to 'wss://serveradress.tld:8084/mqtt' failed

从独立的 MQTT 客户端 (MQTTX) 到代理的 wss 连接也可以正常工作。但它也无法在 hivemq 或 mqttx web 等 Web 客户端上运行。

这是我连接 mqtt 代理的代码：

var mqtt = require('mqtt/dist/mqtt');
var mqttOptions = {
  protocol:  'wss',
  keepalive: 20,
  clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),
  path: "/mqtt/,
  rejectUnauthorized: false
};
const mqttUrl = "wss://serveradress.tld:8084";

var mqttClient = mqtt.connect(mqttUrl, mqttOptions);

我不需要验证证书，因为我在封闭网络中运行连接。我在想，选项“rejectUnauthorized: false”接受这个吗？

有什么建议我可以调试这个吗？ 预先感谢！

尼可

Answer 1

在浏览器中运行时，JavaScript 代码无法控制 TLS/SSL 处理，所有这些都由浏览器完成。

浏览器也不会像访问 HTTPS 页面时那样显示要求您接受无效证书的屏幕。

您唯一的选择（除了使用“真实”CA 颁发的证书之外）是将代理证书或其 CA 证书添加到想要使用代理的每个浏览器的证书存储中。这样浏览器就知道要信任它。

将证书/CA 证书添加到浏览器的方式对于每个浏览器都略有不同，但通常可以在“设置”中的“安全”下找到。

Answer 2

最后是broker配置错误。代理 (EMQX) 未使用正确的证书，因为仅为端口 8883 上的 SSL 连接定义了侦听器。 定义 WSS 侦听器的证书路径后，连接已成功建立。