如何在Vue项目中通过TLS协议连接MQTT服务器

错误原因梳理 #

• 1. 异步请求证书未完成就发起连接：你写的三个axios.get是异步执行的，执行mqtt.connect时ca/key/cert三个字段还没有被赋值，连接时没有携带合法证书直接被服务端拒绝。
• 2. 参数配置不兼容：
  • rejectUnauthorized是Node.js环境专属参数，浏览器端不生效，证书合法性由浏览器内核校验
  • 需确认MQTT服务端开放的是WebSocket over TLS（wss）端口，你填写的48883不能是原生MQTT over TLS（mqtts）端口，浏览器不支持原生mqtts协议
  • protocolVersion、protocolId要和MQTT服务端配置完全对齐，不能和参考示例混用不同版本参数
• 3. 证书请求格式错误：默认axios会尝试将返回值解析为JSON，证书是纯文本格式，会导致证书内容被转义失效。

正确实现代码 #

首先确保已经安装mqtt依赖：npm install mqtt

import mqtt from 'mqtt'
import axios from 'axios'

// 封装证书请求方法，确保返回纯文本
const getCertFile = async (filename) => {
  const res = await axios.get(`/${filename}`, {
    responseType: 'text' // 关键：指定返回纯文本，避免json转义破坏证书格式
  })
  return res.data
}

// 连接逻辑必须等所有证书加载完成后执行
const connectMqtt = async () => {
  // 先并行加载所有证书
  const [ca, key, cert] = await Promise.all([
    getCertFile('ca.crt'),
    getCertFile('client.key'),
    getCertFile('client.crt')
  ])

  const options = {
    port: 48883, // 确认是服务端wss协议对应的端口
    clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
    protocolId: 'MQTT', // 和服务端对齐，3.1.1版本用MQTT，3.1版本用MQIsdp
    protocolVersion: 4, // 和服务端对齐，4对应3.1.1，3对应3.1
    passphrase: 'CLIENT KEY PASSPHRASE',
    ca: [ca],
    key: key,
    cert: cert
  }

  // 替换为实际wss地址，格式为wss://域名/路径（路径如果服务端没配置就不用加）
  const client = mqtt.connect('wss://你的实际MQTT地址', options)

  // 绑定事件监听排查问题
  client.on('connect', () => {
    console.log('MQTT连接成功')
    // 连接成功后再订阅主题
    client.subscribe('你的主题', (err) => {
      if (!err) {
        console.log('订阅成功')
      }
    })
  })

  client.on('error', (err) => {
    console.log('连接错误', err)
    client.end()
  })
}

// 调用连接方法
connectMqtt()

额外排查点 #

• 确认MQTT服务端已经配置了WebSocket支持，并且wss端口可以正常访问
• 如果是自签名证书，需要先在浏览器地址栏直接访问一次wss://你的MQTT地址:端口，会弹出证书不安全提示，选择信任后才能正常连接
• 确认证书文件放在Vue项目的public目录下，这样才能通过axios直接请求到

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