记录一次vue3+mqtt.js连接华为云mqtt的成功经历

首先我用到的开发工具是uniapp+vue3

先贴一个mqttjs官网的示例地址：

MQTT.js教程

官方示例：

const mqtt = require('mqtt')

/***
 * 浏览器环境
 * 使用协议为 ws 和 wss 的 MQTT over WebSocket 连接
 * EMQX 的 ws 连接默认端口为 8083，wss 为 8084
 * 注意需要在连接地址后加上一个 path, 例如 /mqtt
 */
const url = 'ws://broker.emqx.io:8083/mqtt'
/***
 * Node.js 环境
 * 使用协议为 mqtt 和 mqtts 的 MQTT over TCP 连接
 * EMQX 的 mqtt 连接默认端口为 1883，mqtts 为 8084
 */
// const url = 'mqtt://broker.emqx.io:1883'

// 创建客户端实例
const options = {
  // Clean session
  clean: true,
  connectTimeout: 4000,
  // 认证信息
  clientId: 'emqx_test',
  username: 'emqx_test',
  password: 'emqx_test',
}
const client = mqtt.connect(url, options)
client.on('connect', function () {
  console.log('Connected')
  // 订阅主题
  client.subscribe('test', function (err) {
    if (!err) {
      // 发布消息
      client.publish('test', 'Hello mqtt')
    }
  })
})

// 接收消息
client.on('message', function (topic, message) {
  // message is Buffer
  console.log(message.toString())
  client.end()
})

我按照以下的写法均连接失败：

const client = mqtt.connect('mqtt://{hostname}:1883', options)// 基于其他平台的本能之选
const client = mqtt.connect('mqtt://{hostname}:1883/mqtt', options)// 有博客说要加mqtt路径
const client = mqtt.connect('ws://{hostname}:8083/mqtt', options)// 有博客说mqtt本质上是ws协议，得用8083接口

但是实际上华为云的连接方式完全不同：

const client = mqtt.connect('wss://{hostname}:443/mqtt', options)

H5 端禁止直接使用 tcp 协议（浏览器安全限制），必须用 wss:// 且端口为 443，同时华为云的 WebSocket 连接需要加路径 /mqtt（关键！很多人忽略这个路径导致连接无响应）。

并且华为云 IoT 平台的 WebSocket 连接必须包含/mqtt路径，否则会连接失败。

至于为什么用443，华为云的文档中也没有找到明确的解释，期待大佬解答。