Firebase Hosting无法连接WSS协议Mosquitto问题求助

1. 核心网络可达性问题 #

• 前端代码中使用的是内网IP 172.20.107.226，Firebase Hosting是公网部署的服务，浏览器在公网环境下无法直接访问局域网地址，这是导致重连的首要原因。
  • 解决方式：将Mosquitto部署到公网服务器，或使用内网穿透工具（如ngrok）将8084端口映射为公网地址，前端替换为该公网地址进行连接。

2. 证书相关问题 #

• 路径拼写错误：前端代码中私钥路径写为 servver.key，正确应为 server.key，拼写错误会导致fetch失败，无法获取私钥进而连接失败。
• 证书部署验证：确认ca.crt、server.crt、server.key已正确上传到Firebase Hosting的public/certificates目录，确保前端能正常请求到这些文件。
• 证书格式要求：确保证书为PEM格式文本，且传入mqtt客户端时保留首尾的-----BEGIN CERTIFICATE-----/-----END CERTIFICATE-----标识，不要额外修改格式。

3. TLS版本兼容性问题 #

• Mosquitto配置中tls_version tlsv1是老旧的TLS 1.0版本，现代浏览器已禁用该版本，会导致TLS握手失败。
  • 解决方式：修改mosquitto.conf中的TLS版本为tls_version tlsv1.2或更高版本，同时确保证书支持TLS 1.2及以上协议。

4. 跨域配置缺失 #

• 浏览器会因CORS策略阻止跨域WSS连接，需在Mosquitto中添加跨域允许配置：

  listener 8084
  protocol websockets
  http_dir C:/Program Files/mosquitto/Firebase/public
  http_cors_origins https://tkllhk231.web.app
  

  其中http_dir指向静态文件目录，http_cors_origins指定允许的前端域名。

5. 前端代码优化建议 #

改用async/await简化嵌套fetch逻辑，同时修复错误处理：

async function connectToBroker() {
  const clientId = "client" + Date.now();
  // 替换为公网/内网穿透地址
  const host = "wss://your-public-domain:8084/ws";
  
  try {
    const [caRes, certRes, keyRes] = await Promise.all([
      fetch("/certificates/ca.crt"),
      fetch("/certificates/server.crt"),
      fetch("/certificates/server.key")
    ]);

    const ca = await caRes.text();
    const cert = await certRes.text();
    const key = await keyRes.text();

    const options = {
      keepalive: 60,
      clientId: clientId,
      protocolId: "MQTT",
      protocolVersion: 4,
      clean: true,
      reconnectPeriod: 3000, // 延长重连间隔，避免频繁请求
      connectTimeout: 30 * 1000,
      ca: ca,
      cert: cert,
      key: key,
    };

    const mqttClient = mqtt.connect(host, options);
    
    mqttClient.on("error", (err) => {
      console.error("连接错误: ", err);
    });

    mqttClient.on("reconnect", () => {
      console.log("正在重连...");
    });

    mqttClient.on('connect', function () {
      console.log('成功连接到Broker');
      // 可在此添加订阅逻辑
    });
  } catch (err) {
    console.error("获取证书失败: ", err);
  }
}

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