MQTT.js在浏览器中连接WebSocket：解决TypeError错误-js教程-PHP中文网

MQTT.js在浏览器中连接WebSocket：解决TypeError错误

霞舞

发布： 2025-11-01 11:48:01

原创

189人浏览过

MQTT.js在浏览器中连接WebSocket：解决TypeError错误

在浏览器环境中使用mqtt.js时，若遇到typeerror: n.createconnection is not a function错误，通常是由于浏览器安全限制不允许直接建立tcp连接。核心解决方案是确保mqtt broker支持websocket协议，并将客户端连接url从mqtt://改为ws://或wss://，同时确认broker地址配置正确，避免使用指向客户端本地的localhost。

理解浏览器安全模型与MQTT连接限制

当您尝试在Web应用程序中使用MQTT.js连接MQTT Broker时，可能会遇到Uncaught TypeError: n.createConnection is not a function这样的错误，尤其是在代码执行const client = mqtt.connect(broker);这一行时。这个错误的根本原因在于Web浏览器的安全沙箱机制。

浏览器出于安全考虑，严格限制了网页代码直接访问底层的TCP套接字。这意味着，标准的MQTT协议（通常运行在TCP端口1883或8883）无法直接从浏览器中建立连接。MQTT.js库在检测到浏览器环境时，会尝试寻找适合浏览器环境的连接方式，但如果配置不当，就会导致上述TypeError，因为它无法找到一个合适的createConnection方法来建立非WebSocket的TCP连接。

解决方案：利用MQTT over WebSockets

为了在浏览器中成功连接MQTT Broker，必须使用MQTT over WebSockets。WebSocket是一种在单个TCP连接上进行全双工通信的协议，它通过HTTP端口进行握手，然后升级为WebSocket连接，从而绕过了浏览器的TCP连接限制。

要解决此问题，需要从两个方面进行配置：

1. 配置MQTT Broker支持WebSocket

首先，您的MQTT Broker必须配置为支持通过WebSocket协议接受连接。大多数现代MQTT Broker（如Mosquitto, EMQX, HiveMQ等）都支持WebSocket。通常，WebSocket连接会监听在不同的端口，例如8083（非加密）或8084（加密）。

示例Broker配置（以Mosquitto为例）： 在Mosquitto的配置文件（mosquitto.conf）中，您可能需要添加类似以下内容：

listener 1883
protocol mqtt

listener 8083
protocol websockets

登录后复制

这将使Broker在1883端口监听标准MQTT连接，并在8083端口监听MQTT over WebSockets连接。请查阅您所使用的Broker的官方文档以获取详细的WebSocket配置指南。

挖错网

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

查看详情

2. 修改客户端连接URL为WebSocket协议

在您的Web应用程序中，您需要将MQTT Broker的连接URL修改为使用ws://（非加密WebSocket）或wss://（加密WebSocket）前缀，并指定Broker的WebSocket端口。

错误示例（导致TypeError）：

const broker = 'mqtt:<BrokerURL>'; // 错误的协议前缀
const client = mqtt.connect(broker);

登录后复制

正确示例：

const broker = 'ws://<BrokerIP或域名>:<WebSocket端口>'; // 正确的WebSocket协议前缀
// 例如：const broker = 'ws://localhost:8083';
// 例如：const broker = 'ws://your.broker.com:8083';

const client = mqtt.connect(broker);

登录后复制

将您的HTML文件中的JavaScript代码修改如下：

<html>
<head>
    <title>MQTT Data Display</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 config
        // !!! 关键修改：使用 ws:// 或 wss:// 协议，并指定WebSocket端口
        const broker = 'ws://localhost:8083'; // 替换为您的Broker实际IP/域名和WebSocket端口
        const topic = 'your-mqtt-topic';

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

        // connect MQTT Client
        client.on('connect', function () {
            console.log('MQTT connected');
            client.subscribe(topic);
        });

        // 处理连接错误
        client.on('error', function (error) {
            console.error('MQTT connection error:', error);
            // 可以在这里添加UI提示，例如：
            // document.getElementById('dataField').value = '连接错误: ' + error.message;
        });

        // Receive new message
        client.on('message', function (topic, message) {
            const data = message.toString();
            const dataField = document.getElementById('dataField');
            dataField.value = data;
        });

        // publish messsage
        function publishMessage() {
            const inputField = document.getElementById('inputField');
            const message = inputField.value;
            client.publish(topic, message);
        }
    </script>
</body>
</html>

登录后复制

注意事项

Broker地址：localhost的含义 当您在浏览器中运行Web应用时，localhost始终指的是运行浏览器的客户端机器本身。如果您的MQTT Broker运行在另一台服务器上，那么在broker变量中就不能使用localhost，而应该使用该服务器的实际IP地址或域名。
- 示例： 如果Broker运行在IP为192.168.1.100的服务器上，您应使用 ws://192.168.1.100:8083。
- 示例： 如果Broker有域名your.broker.com，您应使用 ws://your.broker.com:8083。
安全性：使用wss:// 在生产环境中，强烈建议使用加密的WebSocket连接，即wss://协议。这要求您的MQTT Broker配置SSL/TLS证书，并在WebSocket端口上启用加密。例如：wss://your.broker.com:8084。
错误处理 为了提高应用的健壮性，建议为MQTT客户端添加错误处理机制，例如监听error事件，以便在连接失败或出现其他问题时能够及时捕获并处理。