React/Next.js中mqtt.js连接自建MQTT Broker失败问题排查

1. 浏览器端MQTT连接的关键限制 #

浏览器环境不支持直接通过TCP协议（mqtt://）连接MQTT Broker，mqtt.js在浏览器中会自动切换为WebSocket协议（ws:///wss://），所以你一开始用mqtt://171.22.25.40:1883的写法本身就不适用于浏览器端，这是连接失败的核心原因之一。

2. 调整Mosquitto Broker配置 #

你的当前配置只开启了未加密的WebSocket（ws）端口9001，但缺少跨域允许配置和WSS（加密WebSocket）监听配置，这导致浏览器ws连接可能因CORS规则拦截失败，同时C#客户端无法连接WSS。

调整后的完整配置示例： #

# TCP协议端口（供C#等非浏览器客户端使用）
port 1883
allow_anonymous true

# 未加密WebSocket端口（仅用于测试，生产环境优先用WSS）
listener 9001
protocol websockets
# 开启跨域支持，允许前端域名访问
http_host 0.0.0.0
http_cors_enable true
http_cors_origin *

# 加密WebSocket（WSS）端口（生产环境推荐）
listener 9002
protocol websockets
# 指定SSL证书和私钥路径（需自行生成或购买合法SSL证书）
certfile /path/to/your/certificate.crt
keyfile /path/to/your/private.key
http_host 0.0.0.0
http_cors_enable true
http_cors_origin *

• http_cors_enable和http_cors_origin是解决浏览器跨域问题的关键，*表示允许所有域名，生产环境建议替换为你的前端实际域名。
• WSS必须依赖SSL证书，测试阶段可以用openssl生成自签名证书，生产环境建议使用CA机构颁发的正式证书。

3. 前端（React/Next.js）正确连接代码 #

直接指定ws/wss协议的连接地址，示例代码：

import mqtt from 'mqtt';

// 未加密ws连接（测试用）
const client = mqtt.connect('ws://171.22.25.40:9001');

// 加密wss连接（生产环境用）
// const client = mqtt.connect('wss://171.22.25.40:9002');

client.on('connect', () => {
  console.log('MQTT连接成功');
  client.subscribe('test/topic', (err) => {
    if (!err) {
      client.publish('test/topic', 'Hello from React');
    }
  });
});

client.on('error', (err) => {
  console.error('连接失败:', err);
});

4. C#客户端连接WSS的注意事项 #

确保C#客户端使用wss://171.22.25.40:9002作为连接地址；如果使用自签名证书，需要在客户端配置中临时忽略证书验证（仅测试场景，生产环境建议将证书导入信任列表）。

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