Next.js中安全WebSocket(WSS)连接MQTT Broker及CRT配置

步骤1：放置证书文件 #

将你的CRT证书文件（例如命名为mqtt-broker.crt）放到Next.js项目的public目录下，这样可以通过静态资源路径直接访问。

步骤2：读取证书并配置连接选项 #

在客户端代码中，先通过fetch获取证书文本内容，再将其传入MQTT连接的配置选项中：

import mqtt, { MqttClient } from "mqtt";

let client: MqttClient | null = null;

const initMqttWssClient = async () => {
  try {
    // 从public目录加载CRT证书
    const certRes = await fetch("/mqtt-broker.crt");
    const certContent = await certRes.text();

    // WSS连接配置
    const connectOptions = {
      ca: certContent, // 注入证书内容
      // 可选：如果Broker需要身份验证，添加用户名密码
      // username: "your-mqtt-username",
      // password: "your-mqtt-password"
    };

    // 建立WSS连接
    client = mqtt.connect("wss://IPADDRESS:1884", connectOptions);

    // 连接成功回调
    client.on("connect", () => {
      console.log("MQTT WSS连接成功");
      // 此处可添加订阅主题等业务逻辑
      // client.subscribe("your-target-topic");
    });

    // 连接错误处理
    client.on("error", (err) => {
      console.error("MQTT WSS连接失败:", err);
      client?.end();
    });
  } catch (err) {
    console.error("加载证书失败:", err);
  }
};

// 在组件初始化时调用连接逻辑（示例）
// useEffect(() => {
//   initMqttWssClient();
//   return () => client?.end(); // 组件卸载时断开连接
// }, []);

注意事项 #

• 确保你的MQTT Broker已经配置了WSS监听，且使用的私钥与该CRT证书匹配，端口需和代码中的1884保持一致（通常WSS默认端口为8883，可根据Broker配置调整）。
• 如果是自签名证书，必须在客户端导入该CA证书，否则浏览器会因证书不信任拒绝连接。
• 证书必须放在public目录，否则Next.js静态资源服务无法访问到该文件。

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