Docker部署的React应用连接Mosquitto broker出现开发服务器断开报错

排查步骤 #

• 核查react-scripts 4.0.3热重载冲突：react-scripts 4.0.3自带的webpack热更新服务会监听本地端口的异常连接，先启动Mosquitto时如果占用了热更新默认的3000以外的隐式端口，或者MQTT连接建立时的频繁握手触发了热更新的异常断连判定，就会抛出The development server has disconnected错误。
• 核查MQTT客户端重连逻辑配置：如果MQTT客户端没有设置合理的重连退避策略，先启动broker时应用启动后立刻发起连接，连接失败就无间隔高频重连，会占满开发服务器的请求队列，导致热更新服务被阻塞，最终触发无限循环和断连。
• 核查Docker网络配置：确认Docker容器的网络模式是否为host，或者Mosquitto的端口映射是否存在冲突，先启动broker时端口被提前绑定，react-scripts启动时的端口检测逻辑会误判端口占用，触发自动重启进入循环。

解决方法 #

• 调整react-scripts相关配置：可升级到react-scripts 5.0.8以上版本，4.x版本的热更新服务存在已知的端口冲突、异常连接误判问题；如果不能升级，在项目根目录新建.env文件，添加配置WDS_SOCKET_PORT=3000强制指定热更新服务端口，避免被MQTT连接占用。
• 调整MQTT客户端连接逻辑：给MQTT客户端添加连接延迟和退避重连配置，示例代码如下：

import mqtt from 'mqtt'

const options = {
  connectTimeout: 4000,
  // 重连间隔设置为2s，避免高频重连
  reconnectPeriod: 2000,
  clientId: `mqtt_${Math.random().toString(16).slice(3)}`
}

// 应用挂载后延迟3s再发起连接，避开开发服务器启动初始化阶段
setTimeout(() => {
  const client = mqtt.connect('ws://你的broker地址', options)
}, 3000)

• 调整Docker启动顺序和端口映射：在docker-compose中添加依赖配置，保证应用容器先启动完成再启动Mosquitto容器，或者给Mosquitto指定非3000、3001等react-scripts默认占用的端口，避免端口冲突。
• 临时关闭热更新验证：如果只是开发阶段临时验证，可以在启动命令中添加FAST_REFRESH=false关闭快速刷新功能，避免断连错误抛出。

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