解决MQTT.js在浏览器中n.createConnection错误的指南-js教程-PHP中文网

解决MQTT.js在浏览器中n.createConnection错误的指南

花韻仙語

发布： 2025-11-01 15:22:01

原创

300人浏览过

解决MQTT.js在浏览器中n.createConnection错误的指南

本文旨在解决mqtt.js在浏览器环境中出现`uncaught typeerror: n.createconnection is not a function`的常见问题。核心在于明确浏览器沙盒限制不允许直接tcp连接，因此必须通过websocket协议与mqtt代理进行通信。教程将详细指导如何配置mqtt代理以支持websocket，并修改客户端代码使用`ws://`或`wss://`协议进行连接，确保web应用能够顺利集成mqtt功能。

理解浏览器环境下的MQTT连接限制

在使用MQTT.js库在Web浏览器中连接MQTT代理时，开发者可能会遇到Uncaught TypeError: n.createConnection is not a function的错误。这个错误通常发生在尝试通过mqtt.connect()方法建立连接时，尤其当连接URL使用mqtt://协议时。

问题的根本原因在于Web浏览器的安全沙盒模型。浏览器不允许网页直接建立任意的TCP套接字连接到非HTTP/HTTPS端口。传统的MQTT协议（通常运行在1883端口）是基于TCP/IP的，这意味着它无法在浏览器环境中直接使用。n.createConnection is not a function的错误提示表明MQTT.js库在浏览器环境中尝试调用一个不存在或不可用的底层TCP连接创建方法，因为浏览器环境没有提供此类API。

解决方案：通过WebSocket实现MQTT连接

为了克服浏览器的限制，MQTT社区引入了“MQTT over WebSockets”的概念。WebSocket协议本身是在HTTP/HTTPS之上建立的，可以穿透浏览器沙盒，允许双向、全双工的通信。因此，在Web应用中使用MQTT.js时，必须通过WebSocket协议连接MQTT代理。

实现这一解决方案需要两个关键步骤：

1. 配置MQTT代理支持WebSocket

首先，您的MQTT代理（如Mosquitto, EMQX, VerneMQ等）必须配置为监听WebSocket连接。大多数现代MQTT代理都支持这一功能，但通常需要明确启用并指定监听端口。

以Mosquitto为例，您需要在其配置文件（通常是mosquitto.conf）中添加如下配置：

# 允许匿名访问 (仅用于测试，生产环境请配置认证)
allow_anonymous true

# 监听标准MQTT端口 (可选，如果仅用于WebSockets则不需要)
listener 1883

# 监听WebSocket端口，通常是8083或8084 (对于TLS/WSS)
listener 8083
protocol websockets

登录后复制

配置完成后，重启MQTT代理服务以使更改生效。请确保防火墙已允许流量通过您配置的WebSocket端口（例如8083）。

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

查看详情

2. 修改客户端连接URL

在您的Web应用中，连接MQTT代理的URL必须从传统的mqtt://或tcp://更改为ws://（用于非加密WebSocket）或wss://（用于加密WebSocket）。

示例代码修改：

将原始代码中的：

const broker = 'mqtt:<BrokerURL>';
// ...
const client = mqtt.connect(broker);

登录后复制

修改为：

// 使用ws://协议连接WebSocket端口
// 如果您的MQTT代理在同一台机器上，并且端口是8083
const broker = 'ws://localhost:8083';
// 或者如果代理在远程服务器上
// const broker = 'ws://your-broker-ip-or-hostname:8083';

// 如果代理支持TLS/SSL，并且您需要安全连接，请使用wss://
// const broker = 'wss://your-broker-ip-or-hostname:8084'; // 8084是常见的WSS端口

// 创建MQTT客户端
const client = mqtt.connect(broker);

登录后复制

完整的HTML示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>MQTT Data Display (WebSocket)</title>
    <script src="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配置
        // 确保您的MQTT代理已配置为在指定端口上监听WebSocket连接
        // 示例：ws://localhost:8083 或 ws://your-broker-ip:8083
        // 如果使用加密连接，请使用 wss://
        const broker = 'ws://localhost:8083'; // 请根据实际情况修改
        const topic = 'your-mqtt-topic'; // 请修改为您的MQTT主题

        // 创建MQTT客户端
        const client = mqtt.connect(broker);

        // 连接MQTT客户端
        client.on('connect', function () {
            console.log('MQTT connected via WebSockets');
            client.subscribe(topic, function (err) {
                if (!err) {
                    console.log('Subscribed to topic:', topic);
                } else {
                    console.error('Subscription error:', err);
                }
            });
        });

        // 接收新消息
        client.on('message', function (topic, message) {
            const data = message.toString();
            const dataField = document.getElementById('dataField');
            dataField.value = data;
            console.log('Received message:', data);
        });

        // 处理连接错误
        client.on('error', function (err) {
            console.error('MQTT connection error:', err);
        });

        // 处理连接断开
        client.on('close', function () {
            console.log('MQTT connection closed.');
        });

        // 发布消息
        function publishMessage() {
            const inputField = document.getElementById('inputField');
            const message = inputField.value;
            if (message) {
                client.publish(topic, message, function (err) {
                    if (!err) {
                        console.log('Published message:', message);
                        inputField.value = ''; // 清空输入框
                    } else {
                        console.error('Publish error:', err);
                    }
                });
            }
        }
    </script>
</body>
</html>

登录后复制

注意事项与故障排除

localhost的含义： 在浏览器环境中，localhost始终指的是运行浏览器的客户端机器。如果您的MQTT代理运行在另一台服务器上，您必须使用该服务器的实际IP地址或域名，而不是localhost。
端口号： 确保客户端代码中使用的WebSocket端口与MQTT代理实际监听的WebSocket端口一致。常见的非加密WebSocket端口是8083，加密WebSocket端口是8084。
CORS（跨域资源共享）： 如果您的Web应用和MQTT代理不在同一个域名下，您可能会遇到CORS问题。MQTT代理的WebSocket监听器通常需要配置以允许来自您的Web应用源的连接。具体配置方法取决于您使用的MQTT代理。
防火墙： 确保服务器上的防火墙允许外部连接到MQTT代理的WebSocket端口。
TLS/SSL (WSS)： 强烈建议在生产环境中使用wss://进行加密连接，以保护数据传输安全。这需要您的MQTT代理配置SSL证书。
错误处理： 在客户端代码中添加client.on('error', ...)和client.on('close', ...)等事件监听器，可以帮助您更好地诊断连接问题。检查浏览器开发工具的控制台输出，通常能提供更详细的错误信息。

总结

当在Web浏览器中使用MQTT.js时，遇到Uncaught TypeError: n.createConnection is not a function错误的核心原因在于浏览器安全策略不允许直接TCP连接。解决此问题的关键在于强制通过WebSocket协议进行通信。这要求MQTT代理配置支持WebSocket监听器，并且客户端代码中的连接URL必须使用ws://或wss://前缀。遵循这些步骤并注意相关的网络和安全配置，将确保您的Web应用能够稳定、安全地与MQTT代理进行交互。

以上就是解决MQTT.js在浏览器中n.createConnection错误的指南的详细内容，更多请关注php中文网其它相关文章！