无法从 React 客户端连接到 "mqtt://test.mosquitto.org"

Question

我想将客户端 React 应用程序连接到 mosquitto 测试服务器。涉及的“肉”React代码：

import mqtt from 'mqtt';


    const mqttConnect = ("mqtt://192.168.1.157",{clientId:"mqttjs01"}) => {
        setConnectStatus('Connecting');
        console.log(mqttOptions)
        setClient(mqtt.connect(host, mqttOptions));
    };

网页上的错误是：

ws.js:108 WebSocket connection to 'ws://test.mosquitto.org/' failed:

所以我看到的一个挑战是网络套接字的坚持。（ws 协议）。然后另一个挑战是我的最终目标是在 Raspberry Pi（端口 1883，我认为 mqqt:// 正在寻址）上与 mosquitto 经纪人运行交谈。 Raspberry Pi 没有使用 websockets。

在我看来，我显然是一无所知。任何指导/指向正确方向的任何指导......非常感谢。谢谢。

Answer 1

对于 React，您必须使用 WebSockets（因为它有效地在浏览器中运行）所以您的 URL 应该以 ws:// 开头，而不是 mqtt://。

其次，您需要指定一个端口，因为 MQTT over Websockets 没有默认端口（WebSockets 库将默认为端口 80）

所以在 test.mosquitto.org 上检查了 table 端口号后，您应该使用：

ws://test.mosquitto.org:8080/

p.s 您的客户端 ID 可能还需要更多的熵（随机），否则您将永远只有 1 个连接的客户端。

至于您的本地设置，您需要配置 mosquitto 以侦听 2 个不同的端口：

一个用于普通 MQTT（默认 1883）
一个用于 WebSockets 上的 MQTT（您想要的任何端口）

例如类似这样的 conf 文件：

allow_anonymous true

listener 1883

listener 9001
protocol websockets

Mosquitto 将在两个听众之间分享相同的主题space。

无法从 React 客户端连接到 "mqtt://test.mosquitto.org"

cannot connect to "mqtt://test.mosquitto.org" from React client

reactjs

mqtt