MQTT.js报错Uncaught TypeError: n.createConnection is not a function求助

错误原因分析 #

这个错误通常由两个核心问题导致：

• 你引入的是Node.js环境专用的MQTT.js版本，而非适配浏览器的版本。Node.js版依赖Node的net/tls模块创建TCP连接，浏览器中没有这些API，因此会抛出createConnection不存在的错误。
• Broker地址使用了mqtt://协议，这是TCP协议，浏览器无法直接发起TCP连接，必须使用WebSocket协议（ws://或wss://）。

解决步骤 #

1. 替换为浏览器适配的MQTT.js版本 #

将本地的mqtt.min.js替换为官方提供的浏览器兼容版，直接通过CDN引入最方便：

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

2. 修改Broker连接地址的协议 #

把mqtt:<BrokerURL>改为WebSocket协议格式，示例：

• 未加密WebSocket：ws://你的Broker地址:8083（多数Broker默认WebSocket端口为8083）
• 加密WebSocket：wss://你的Broker地址:8084（加密端口通常为8084）

同时要确保你的MQTT Broker已经开启了WebSocket服务（比如EMQX、Mosquitto都需要单独配置WebSocket监听端口）。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>MQTT Data Display</title>
    <!-- 引入浏览器兼容的MQTT.js版本 -->
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
    <h1>MQTT Data Display</h1>
    
    <h2>Receiving Data:</h2>
    <textarea id="dataField" rows="5" cols="50" readonly></textarea>
    
    <h2>Input text:</h2>
    <input type="text" id="inputField" />
    <button onclick="publishMessage()">Send</button>
    
    <script>
        // MQTT Broker config：改用WebSocket协议
        const broker = 'ws://你的Broker地址:8083';
        const topic = 'your-mqtt-topic';

        // 创建MQTT Client
        const client = mqtt.connect(broker);

        // 连接成功回调
        client.on('connect', function () {
            console.log('MQTT connected');
            client.subscribe(topic);
        });

        // 接收消息回调
        client.on('message', function (topic, message) {
            const data = message.toString();
            const dataField = document.getElementById('dataField');
            dataField.value = data;
        });

        // 发布消息
        function publishMessage() {
            const inputField = document.getElementById('inputField');
            const message = inputField.value;
            client.publish(topic, message);
            // 可选：发送后清空输入框
            inputField.value = '';
        }
    </script>
</body>
</html>

额外检查点 #

• 确认Broker的WebSocket端口对外开放，没有被防火墙拦截
• 如果使用wss://，要确保Broker配置了正确的SSL证书

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