useMqtt

useMqtt 是一个自定义的 React Hook，旨在通过 WebSocket 在 React 应用中集成和管理 MQTT 连接。它通过对 Paho-MQTT 客户端的二次封装，提供了声明式的连接状态管理、自动资源回收以及消息订阅/发送功能。

核心功能

异步初始化：自动按需加载 mqttws31.js 依赖脚本。
状态感知：实时监控连接状态，并处理断开连接的情况。
组件自动回收：在 React 组件销毁时，自动注销订阅并安全断开 MQTT 连接。
灵活配置：支持对多主题 (topic) 的单线管理，支持 SSL 连接。

安装

Hook 位于 @pt/react-common 包中：

pnpm add @pt/react-common

基本用法

import { useEffect } from "react";
import { useMqtt } from "@pt/react-common/hooks";

function SensorDisplay() {
  const { isConnected, startMqtt, sendMessage, disconnect } = useMqtt({
    mqttConfig: {
      vhost: "pt-vhost",
      password: "password",
      webUri: "ws://mq-broker.com:9080",
      username: "user01",
      useSSL: false,
    },
    satoken: "user-auth-token",
  });

  useEffect(() => {
    // 启动 MQTT 连接并开启消息监听
    startMqtt("/devices/sensor-01", (topic, message) => {
      console.log(`收到 ${topic} 消息：${message}`);
    });

    // Hook 会在组件卸载时自动处理销毁逻辑
  }, [startMqtt]);

  const togglePump = () => {
    sendMessage("command:open", "/devices/pump-01");
  };

  return (
    <div>
      <p>消息队列状态：{isConnected ? "已连接" : "未连接"}</p>
      <button onClick={togglePump} disabled={!isConnected}>
        开启水泵
      </button>
    </div>
  );
}

API 说明

useMqtt 接收一个可选的配置项参数 MqttOptions，并返回一个包含以下属性和方法的对象。

返回值 (Return)

属性/方法	类型	说明
`isConnected`	`boolean`	当前是否处于已连接状态
`error`	`Error \| undefined`	连接或操作过程中的异常错误对象
`startMqtt`	`(topic: string \| string[], callback, config?) => Promise<void>`	建立连接并订阅主题的方法
`sendMessage`	`(message: string, topic: string) => void`	向指定主题发送消息的方法
`disconnect`	`() => Promise<void>`	手动断开连接并注销所有订阅
`mqttClient`	`MQTTClient \| null`	内部封装的原始 MQTT 客户端实例

参数 (MqttOptions)

选项名	类型	必填	说明
`mqttConfig`	`MqttConfig`	是	包含 vhost、webUri、username、password 等连接参数
`satoken`	`string`	是	后端用于识别身份的认证 Token
`basePath`	`string`	否	用于加载依赖 JS 的基础路径
`topic`	`string \| string[]`	否	默认订阅的主题列表

注意事项

单例模式：每个 useMqtt 调用实例都会管理其独立的连接池。在同一个页面中如果只需一个连接，请确保只调用一次 Hook 或通过 Context 进行分发。
环境依赖：该 Hook 需要浏览器环境支持 crypto 或 Crypto API 用于生成设备唯一 ID。
依赖文件：在生产环境中，请确保 mqttws31.js 文件位于指定的 basePath 下，以便 Hook 能够顺利动态加载该库。