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

Posted

技术标签:

【中文标题】无法从 React 客户端连接到“mqtt://test.mosquitto.org”【英文标题】:cannot connect to "mqtt://test.mosquitto.org" from React client 【发布时间】: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。

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

【问题讨论】:

【参考方案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 服务器上添加监听器!谢谢!!!!

以上是关于无法从 React 客户端连接到“mqtt://test.mosquitto.org”的主要内容,如果未能解决你的问题,请参考以下文章

在 iPhone 上使用 expo 时无法从 React Native 应用程序连接到 socket.io 服务器

无法从 nodejs/python 客户端连接到 grpc

phpMyAdmin 无法从 Linux 客户端连接到 Windows 7 上的远程服务器

无法将 React 连接到 Graphcool 后端

出于开发目的,无法从本地主机连接到 AWS RDS Postgresql

无法从 https 客户端通过 wss 连接到 emqx mqtt 代理