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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-01

浏览次数：次

返回列表

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配置指南。

PHP168 行业B2B

解决问题如下：只列举最近用户提交问题，其余问题前面几次补丁已经解决，不在复述。1、解决搜索问题。以前搜索一定要确定到省下面的某个市，这个不符合用户体验。现在改为，省--所有城市（默认为所有城市，也可以自己选择某个市）。2、解决首页推荐产品部显示问题。（以前没有考虑多个其他浏览器）3、解决供应、求购今日产品显示问题。（理由同上）4、解决收藏商家、供应、求购问题。（链接错误）5、解决后台分类过

0 查看详情 PHP168 行业B2B

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文件中的J*aScript代码修改如下：

<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事件，以便在连接失败或出现其他问题时能够及时捕获并处理。

通过以上步骤，您应该能够解决在浏览器中使用MQTT.js时遇到的TypeError: n.createConnection is not a function错误，并成功建立与MQTT Broker的WebSocket连接。

以上就是MQTT.js在浏览器中连接WebSocket：解决TypeError错误的详细内容，更多请关注其它相关文章！

# 有哪些 # 腾讯营销推广方案 # 常州网站优化怎样做的好 # 锦州搜索引擎seo推广 # 台湾seo课程老师招聘 # 五金机械商贸推广类网站 # 优化设置seo # 固原关键词排名价格 # 软文优化知名乐云seo # 北京市短视频seo # 武威抖音seo # 搜索功能 # 如何实现 # 解决问题 # 并在 # javascript # 如何用 # 客户端 # 器中 # 您的 # web # 配置文件 # html文件 # ssl # websocket # 端口 # 浏览器 # js # html # java

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：CSS布局：子元素内容如何底部对齐

下一篇：Angular字符串首字母大写转换：使用TitleCasePipe的教程

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

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

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

解决方案：利用MQTT over WebSockets

1. 配置MQTT Broker支持WebSocket

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

注意事项