无法从 React 客户端连接到“mqtt://test.mosquitto.org”答案

【问题标题】：cannot connect to "mqtt://test.mosquitto.org" from React client无法从 React 客户端连接到“mqtt://test.mosquitto.org”
【发布时间】：2022-01-14 13:58:49
【问题描述】：

我想将客户端 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:// 正在处理）上的蚊子代理交谈。 Raspberry Pi 没有使用 websocket。

对我来说很明显我一无所知。任何指导/指向正确的方向......非常感谢。谢谢。

【问题讨论】：

标签： reactjs mqtt

【解决方案1】：

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

其次，您需要指定端口，因为 Websockets 上的 MQTT 没有默认端口（并且 WebSockets 库将默认为端口 80）

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

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

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

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

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

例如一个类似的conf文件：

allow_anonymous true

listener 1883

listener 9001
protocol websockets

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

【讨论】：

谢谢。我刚刚弄清楚了 test.mosquito.org 的 ws 和端口 8080 ......我将在 Rasp Pi 服务器上添加监听器！谢谢！！！！