React应用中MQTT与Mosquitto Broker连接失败求助

问题根源 #

默认情况下，Mosquitto Broker仅开启MQTT TCP协议的1883端口，并不支持WebSocket连接。你在React里用ws://localhost:1883尝试连接，相当于用WebSocket协议去访问TCP端口，自然会失败。

解决步骤 #

1. 配置Mosquitto支持WebSocket #

找到你的Mosquitto配置文件（不同系统路径不同：

• Linux：/etc/mosquitto/mosquitto.conf
• Windows：Mosquitto安装目录下的mosquitto.conf）

打开文件，添加以下配置：

# 保留原有的TCP端口（供命令行使用）
listener 1883
protocol mqtt

# 新增WebSocket监听端口（供React等前端使用）
listener 1884
protocol websockets

2. 重启Mosquitto服务 #

• Linux：执行命令 sudo systemctl restart mosquitto
• Windows：打开「服务」找到「Mosquitto Broker」，右键选择重启；或者命令行依次执行：

  net stop mosquitto
  net start mosquitto
  

3. 修改React代码中的连接地址 #

把原来的连接URL从 ws://localhost:1883 改成 ws://localhost:1884。

4. 验证连接（可选） #

可以用MQTTX这类工具，选择WebSocket协议，连接ws://localhost:1884，确认能正常连接后再回到React代码测试。

内容的提问来源于stack exchange，提问作者Abhishek Kumar