使用带有 Websockets 的 JavaScript MQTT 客户端连接到 MQTT 代理时出错答案

【问题标题】：Error While connecting to MQTT Broker using JavaScript MQTT Client With Websockets使用带有 Websockets 的 JavaScript MQTT 客户端连接到 MQTT 代理时出错
【发布时间】：2018-11-20 05:33:27
【问题描述】：

我正在使用 MQTT，当我尝试连接到 mosquitto_sub 时，我能够连接，但是当我尝试通过 JavaScript MQTT 客户端使用 Websockets 连接时，我收到错误 AMQJSC0001E Connect timed out。

这是我的代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Mosquitto Websockets</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" type="text/javascript"></script>
    

    <script type="text/javascript">
	var host = "eu.thethings.network";
	var username = "sr-ops-rtr-XX";
	var password = "ttn-account-v2.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
	var topic = "/devices/+/up";
	var useTLS = "sr-ops-rtr-01";
	cleansession = "";
	var port = 10;
    var mqtt;
    var reconnectTimeout = 2000;
    function MQTTconnect() {
	if (typeof path == "undefined") {
		path = '/devices/up';
	}
	mqtt = new Paho.MQTT.Client(
			host,
			port,
			path,
			"web_" + parseInt(Math.random() * 100, 10)
	);
	
        var options = {
            timeout: 10,
            //useSSL: useTLS,
            //cleanSession: true,
            onSuccess: onConnect,
            onFailure: function (message) {
				console.log(message);
                $('#status').val("Connection failed: " + message.errorMessage + "Retrying");
                setTimeout(MQTTconnect, reconnectTimeout);
            }
        };
        mqtt.onConnectionLost = onConnectionLost;
        mqtt.onMessageArrived = onMessageArrived;
        if (username != null) {
            options.userName = username;
            options.password = password;
        }
        console.log("Host="+ host + ", port=" + port + ", path=" + path +  " username=" + username + " password=" + password);
		console.log(options);
        mqtt.connect(options);
    }
    function onConnect() {
		alert("connected");
        $('#status').val('Connected to ' + host + ':' + port + path);
        // Connection succeeded; subscribe to our topic
        mqtt.subscribe(topic, {qos: 0});
        $('#topic').val(topic);
    }
    function onConnectionLost(response) {
        setTimeout(MQTTconnect, reconnectTimeout);
        $('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting");
    };
    function onMessageArrived(message) {
        var topic = message.destinationName;
        var payload = message.payloadString;
        $('#ws').prepend('<li>' + topic + ' = ' + payload + '</li>');
    };
    $(document).ready(function() {
        MQTTconnect();
    });
    </script>
  </head>
  <body>
    <h1>Mosquitto Websockets</h1>
    <div>
        <div>Subscribed to <input type='text' id='topic' disabled />
        Status: <input type='text' id='status' size="80" disabled /></div>

        <ul id='ws' style="font-family: 'Courier New', Courier, monospace;"></ul>
    </div>
  </body>
</html>

我做错了什么？

【问题讨论】：

将您的 MQTTconnect(); 移动到正文元素中
可能是一些连接失败错误。尝试使用带有 chrome 扩展的 MQTTLen 或 MQTTBox 测试您的代理连接。
您确定物联网支持 MQTT over Websockets 吗？ Doc (thethingsnetwork.org/docs/applications/mqtt/api.html) 没有提及它。（端口 10 也看起来不对）

标签： javascript mqtt iot

【解决方案1】：

当您加载页面时，会调用 MQTTconnect（上面代码中的页面底部）。

<body>
<h1>Mosquitto Websockets</h1>
<div>
    <div>Subscribed to <input type='text' id='topic' disabled />
    Status: <input type='text' id='status' size="80" disabled /></div>

    <ul id='ws' style="font-family: 'Courier New', Courier, monospace;"></ul>
 </div>
   $(document).ready(function() {
      MQTTconnect();
    });
</body>

【讨论】：

我可以调用我认为没有问题的函数
可能是一些连接失败错误。尝试使用带有 chrome 扩展的 MQTTLen 或 MQTTBox 测试您的代理连接。
您已经在 HTML 正文中编写了 jQuery，但没有声明脚本。改正