在浏览器环境中使用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 1883protocol mqttlistener 8083protocol websockets
这将使Broker在1883端口监听标准MQTT连接，并在8083端口监听MQTT over WebSockets连接。请查阅您所使用的Broker的官方文档以获取详细的WebSocket配置指南。
2. 修改客户端连接URL为WebSocket协议
在您的Web应用程序中，您需要将MQTT Broker的连接URL修改为使用ws://（非加密WebSocket）或wss://（加密WebSocket）前缀，并指定Broker的WebSocket端口。
错误示例（导致TypeError）：
const broker = 'mqtt:'; // 错误的协议前缀const client = mqtt.connect(broker);
正确示例：
const broker = 'ws://:'; // 正确的WebSocket协议前缀// 例如：const broker = 'ws://localhost:8083';// 例如：const broker = 'ws://your.broker.com:8083';const client = mqtt.connect(broker);
将您的HTML文件中的JavaScript代码修改如下：
MQTT Data Display MQTT Data Display
Receiving Data:
Input text:
// 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); }
注意事项
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错误的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534378.html
微信扫一扫 
支付宝扫一扫 
