Vite（React+TypeScript）与Next.js中MQTT.js无法使用问题

环境信息 #

• Node版本：18.17.1
• Npm版本：9.8.1
• 已安装依赖：npm install mqtt

问题描述 #

MQTT库在纯JavaScript环境中连接mqtt://test.mosquitto.org代理可正常工作，但在Vite（React）和Next.js应用中使用以下代码连接时均失败。

复现代码 #

import { useState } from 'react'
import './App.css'

import * as mqtt from 'mqtt'

function App() {

  let client = mqtt.connect("mqtt://test.mosquitto.org"); // create a client

  return (
    <>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

连接情况 #

• 纯JavaScript环境连接MQTT代理 → 正常
• Vite（React）环境连接MQTT代理 → 失败
• Next.js环境连接MQTT代理 → 失败

解决方案 #

1. 切换为WebSocket协议 #

浏览器环境不支持原生TCP的mqtt://协议，必须使用WebSocket协议连接。Mosquitto测试服务器支持以下WebSocket地址：

• 非加密：ws://test.mosquitto.org:8080
• 加密：wss://test.mosquitto.org:8081

2. 规范组件内连接逻辑 #

避免在组件渲染阶段直接创建MQTT客户端，应放在useEffect钩子中，确保只在组件挂载时初始化一次，并在卸载时清理连接：

import { useEffect } from 'react'
import './App.css'
import * as mqtt from 'mqtt'

function App() {
  useEffect(() => {
    // 使用WebSocket协议初始化连接
    const client = mqtt.connect("ws://test.mosquitto.org:8080");

    // 监听连接状态
    client.on('connect', () => {
      console.log('MQTT连接成功');
    });

    client.on('error', (err) => {
      console.error('MQTT连接失败:', err);
    });

    // 组件卸载时断开连接
    return () => {
      client.end();
    };
  }, []);

  return (
    <>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

3. Next.js 专属处理（SSR/SSG场景） #

如果Next.js项目使用服务端渲染，需要确保MQTT连接仅在客户端执行：

import { useEffect } from 'react';
import * as mqtt from 'mqtt';

function MyComponent() {
  useEffect(() => {
    // 仅在浏览器环境初始化连接
    if (typeof window !== 'undefined') {
      const client = mqtt.connect("ws://test.mosquitto.org:8080");
      
      client.on('connect', () => console.log('连接成功'));
      client.on('error', err => console.error('连接失败:', err));

      return () => client.end();
    }
  }, []);
  
  return <div>MQTT连接测试</div>;
}

export default MyComponent;

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