React+TypeScript连接自定义MQTT SSL Broker报错求助

为什么代码里写ssl://却出现wss://连接？ #

浏览器环境不支持原生MQTT TCP协议（包括ssl://对应的MQTT over TLS），mqtt.js会自动将连接转换为WebSocket协议：ssl://对应wss://（加密WebSocket），mqtt://对应ws://（普通WebSocket），这是正常的适配行为，无需困惑。

证书错误（ERR_CERT_AUTHORITY_INVALID）的解决步骤 #

1. 修正证书字符串格式 #

确保TRUSTED_CA_LIST、KEY、CERT是完整的PEM格式字符串：

• CA证书和客户端证书必须包含-----BEGIN CERTIFICATE-----和-----END CERTIFICATE-----首尾标记
• 客户端私钥必须包含-----BEGIN PRIVATE KEY-----或-----BEGIN RSA PRIVATE KEY-----首尾标记
• 字符串不能丢失换行符，建议直接读取文件内容后转为字符串，避免手动复制时遗漏格式

2. 调整连接地址与协议配置 #

浏览器环境下直接使用wss://前缀，并修正protocol配置：

// 修正后的options
const options = {
  username: "username",
  password: "password",
  clientId: "id",
  key: KEY, // 确保是完整PEM格式字符串
  cert: CERT, // 确保是完整PEM格式字符串
  rejectUnauthorized: false,
  ca: TRUSTED_CA_LIST, // 确保是完整PEM格式字符串
  protocol: "mqtts" // 浏览器WebSocket加密连接对应mqtts协议
};

// 直接使用wss://前缀
const client = mqtt.connect("wss://brokerurl:1884", options);

3. 处理浏览器证书信任限制 #

虽然设置了rejectUnauthorized: false，但浏览器安全策略可能仍会拦截不受信任的证书：

• 测试环境：手动在Edge浏览器访问wss://brokerurl:1884，在证书提示窗口中将该证书添加到浏览器信任列表
• 生产环境：使用受公共信任CA签发的证书，避免自定义CA带来的信任问题

4. 升级mqtt.js依赖 #

你的mqtt.js版本（4.3.7）较旧，新版本对浏览器WebSocket场景的证书支持更完善：

npm install mqtt@latest

5. 验证证书有效性 #

用openssl命令验证证书链是否正常（需本地安装openssl）：

openssl s_client -connect brokerurl:1884 -CAfile ./your-ca-cert.pem

如果命令输出显示Verify return code: 0 (ok)，说明证书本身有效，问题出在代码配置或浏览器信任。

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