ReactJS无法连接运行在Docker中的本地MQTT Broker问题求助

React 连接 Docker MQTT Broker 连接失败解决方法 #

1. 代码配置错误修正

你当前代码的mqtt.connect配置存在两处格式错误：

• host字段仅需填写IP地址，ws://协议前缀需要单独通过protocol字段配置
• 1883是MQTT原生TCP协议默认端口，浏览器端使用WebSocket协议连接时，需要对应Broker的WebSocket监听端口（常用默认值为9001）
• 原subscribe回调参数写法错误，消息接收需要通过client.on('message')事件监听

修正后的代码如下：

import mqtt from 'mqtt';
// 若MQTT Broker开启了用户名密码认证，可额外添加username、password字段
const client = mqtt.connect({
  host: '192.168.31.46',
  port: 9001, // 替换为你的Broker实际暴露的WebSocket端口
  protocol: 'ws',
  // username: '自定义用户名',
  // password: '自定义密码'
});

client.on('connect', () => {
  console.log('Connected');
  client.subscribe('SEND_MESSAGE', function (err) {
    if (!err) {
      console.log('SEND_MESSAGE 主题订阅成功');
    }
  });
});

// 新增错误监听方便快速定位问题
client.on('error', (err) => {
  console.error('连接错误：', err);
  client.end();
});

// 统一接收订阅主题的消息
client.on('message', (topic, message) => {
  console.log({ topic, message: message.toString() });
});

export default client;

2. MQTT Broker 配置检查

• 确认你部署的MQTT Broker（以Mosquitto为例）已经开启了WebSocket监听，配置文件需要添加如下内容：

listener 1883
allow_anonymous true # 若不需要匿名访问可改为false，配置用户名密码

listener 9001
protocol websockets
allow_anonymous true # 同上

• 确认Docker启动时已经将WebSocket端口映射到宿主机，启动命令需要包含-p 1883:1883 -p 9001:9001参数

3. 网络连通性检查

• 宿主机本地访问http://192.168.31.46:9001，返回空响应/400错误都属于端口正常监听的状态，若无法访问需要检查端口映射是否正常
• 关闭宿主机防火墙对应端口的拦截规则，或者放行1883、9001端口
• 本地启动React项目测试时，确认开发设备和MQTT Broker所在设备处于同一局域网段

内容的提问来源于stack exchange，提问作者Hafiz Muhammad Bilal