Paho MQTT 客户端在页面加载时不断断开连接

Question

我很确定这只是一个组织问题，但我很难找到和我有同样经历的人。

我的网站有多个页面，这些页面将使用 MQTT 客户端发布和订阅主题。鉴于我不想为每个 HTML 文档都进行初始化过程，我创建了 controller.js:

var mqtt;
var reconnectTimeout = 2000;
var host = 'mqtt.eclipseprojects.io/mqtt';
var port = 80;

function onFailure(message) {
    console.log("bruh daed");
    setTimeout(MQTTconnect, reconnectTimeout);
}

function onConnect() {
    connected_flag = 1;
    mqtt.subscribe("#"); // At this point I am hoping to get messages from anything
    console.log(mqtt.isConnected());
    console.log("Connected");
}

function onConnectionLost() {
    alert("Connection Lost!!!");
}

function onMessageArrived() {
    console.log(msg);
    out_msg = "Message received " + msg.payloadString + "<br>";
    out_msg = out_msg + "Message received Topic " + msg.destinationName;
    console.log(out_msg);
}

function MQTTconnect() {

    mqtt = new Paho.MQTT.Client(host, port, "byu_ssdd" + parseInt(Math.random() * 100, 10));

    var options = {
        onSuccess: onConnect,
        onFailure: onFailure,
        keepAliveInterval: 100
    };

    mqtt.onConnectionLost = onConnectionLost;
    mqtt.onMessageArrived = onMessageArrived;
    mqtt.connect(options);
    return false;
}

function send_message_info(info) {
    var topic = "byu_ssdd/commands";
    message = new Paho.MQTT.Message(info);
    message.destinationName = topic;
    console.log(mqtt);
    if (mqtt.isConnected()) {
        mqtt.send(message);
        console.log(message);
    }
    else {
        mqtt.connect();
        console.log("I am not connected!!!");
    }

    alert("Message sent!");
    return false;
}

function test() {
    alert("Reached!");
}

MQTTconnect();

我将此脚本包含在我的 HTML 文件中，如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Demos</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/controller.js"></script>
    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
    <!-- Bootstrap icons-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="css/styles.css" rel="stylesheet" />
</head>

<body style="background-color: antiquewhite;">

    <!-- Header-->
    <header class="bg-dark py-5 sev">
        <div class="container px-4 px-lg-5 my-5">
            <div class="text-center text-white">
                <h1 class="display-4 fw-bolder" style="color: rgb(255, 0, 0); text-shadow: 1px 0px 5px #ff000070;">Display</h1>
            </div>
        </div>
    </header>
    <!-- Section-->
    <section class="py-5">
        <div class="container px-4 px-lg-5 mt-5">
            <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">


                <div class="col mb-5">
                    <a href="#" style="text-decoration: none;">
                        <div onclick="send_message_info('banana')" class="card d-flex h-150 d-flex align-items-center justify-content-center"
                            style="background-image: url('assets/demos.png'); background-repeat: no-repeat; background-position: center; background-size: 50%; background-color: black;">
                            <h2 class="fw-bolder" style="padding: 20px; color: antiquewhite;">Demos</h2>
                        </div>
                    </a>
                </div>
                <div class="col mb-5">
                    <a href="games.html" style="text-decoration: none;">
                        <div class="card d-flex h-150 d-flex align-items-center justify-content-center"
                            style="background-image: url('assets/game.jpg'); background-repeat: no-repeat; background-position: center; background-size:220%; background-color: black;">
                            <h2 class="fw-bolder" style="padding: 20px; color: antiquewhite;">Games</h2>
                        </div>
                    </a>
                </div>
            </div>
    </section>
    <!-- Bootstrap core JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Core theme JS-->
    <script src="js/scripts.js"></script>
</body>

</html>

我一直在考虑这个想法，也许它在 controller.js 中我有 MQTTConnect() 的地方，并尝试了各种方法将其包含在不同的地方，但无济于事。

当前的行为是，如果我在页面加载时单击 ID 为 demos 的 div，我可以单击 div 并让它发送一个消息正确，但在大约一秒钟的时间内，我收到了我已与经纪人断开连接的警报。我在这里做错了什么？

Answer 1

你的问题在这里：

function onMessageArrived() {
    console.log(msg);
    out_msg = "Message received " + msg.payloadString + "<br>";
    out_msg = out_msg + "Message received Topic " + msg.destinationName;
    console.log(out_msg);
}

msg 未定义，因此 onMessageArrived 将引发导致断开连接的错误。修复非常简单：

function onMessageArrived(msg) {
    console.log(msg);
    out_msg = "Message received " + msg.payloadString + "<br>";
    out_msg = out_msg + "Message received Topic " + msg.destinationName;
    console.log(out_msg);
}

请注意，如果您输出错误，您将自己找到：

function onConnectionLost(err) {
    console.log("Connection Lost!!!", err);
}

这是一个 working fiddle（做了一些更改以使其作为 fiddle 工作，并更改了主题，因为在测试代理上订阅 # 往往会使事情过载!).

Paho MQTT 客户端在页面加载时不断断开连接

Paho MQTT client keeps disconnecting on page load

javascript

html

mqtt

paho