html页面中的mqtt客户端

问题描述 投票：0回答：2

我想要一个可以发布和订阅 mqtt 代理的网页。 我还想使用 1883 端口与代理进行通信 - 而不是 websoctets。

这可能吗？有人有任何可行的例子吗.. 我是一个真正的新手，承认我不完全理解nodejs和javascript之间的区别。

我制作了一个 html 页面，它有一个复选框设置，该复选框设置为通过 mqtt 代理切换 esp8266 上的 LED。在我加载页面后 - 开关工作...但我希望一旦我加载网页，它就会检查 LED 的状态并将其反映在复选框上。即：当我加载页面时，我可以看到 LED 是否打开或关闭。

我有一个工作的nodejs脚本，可以向led发布状态请求，并订阅响应..并且它成功收到响应..

有什么方法可以将此脚本构建到我的 html 页面中，以便在加载时从脚本获取响应并相应地设置复选框？

我看到了一些 java mqtt html 客户端的示例，但这些似乎只适用于 websockets。 在我的项目中，我不确定我可以将哪些监听器端口用于 websockets（如果有），所以更愿意坚持使用 mqtt 端口 1883。

欢迎所有想法？ 谢谢

javascript html client mqtt
2个回答
0
投票

如果您想通过网页连接到 MQTT 代理，您必须使用基于 Websockets 的 MQTT。浏览器中的 Javascript 沙箱不允许您以任何其他方式执行此操作。

您将需要使用支持基于 Websockets 的 MQTT 的 MQTT 代理，并且您很可能需要对其进行配置才能执行此操作。它需要位于到 1883 的单独端口上，因为这传统上用于本机 MQTT。

您可以使用 Paho JavaScript 库 (https://www.eclipse.org/paho/index.php?page=clients/js/index.php) 或 MQTT.js 库 (https:// www.npmjs.com/package/mqtt）在浏览器中。这两个库都带有示例。

我们不仅仅在 Stack Overflow 上提供示例，还可以尝试使用库提供的示例，如果您遇到困难，请打开一个 new 问题并展示您尝试过的内容并解释哪些内容不起作用，我们将帮助您修复它。

0
投票

配置 MQTT 代理后，您可以使用以下命令进行测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MQTT Subscriber</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script>
    <script>
       
        var broker = {
            hostname: "127.0.0.1",
            port: 9001,
            clientId: "web_" + Math.random().toString(16).substr(2, 8)
        };
 
        var topic = "led_status";

        // MQTT client instance
        var client = new Paho.MQTT.Client(broker.hostname, broker.port, broker.clientId);
 
        function onConnect() {
            console.log("Connected to MQTT broker");
            client.subscribe(topic);
            console.log("Subscribed to topic: " + topic);
        }

        function onFailure(message) {
            console.log("Connection to MQTT broker failed: " + message.errorMessage);
        } 

        function onMessageArrived(message) {
            console.log("Received message: " + message.payloadString); 
            document.getElementById("message").innerHTML = "Received message: " + message.payloadString;
        }

        // Set callback functions
        client.onConnectionLost = onFailure;
        client.onMessageArrived = onMessageArrived;

        // Connect to MQTT broker
        client.connect({
            onSuccess: onConnect,
            onFailure: onFailure,
            useSSL: false,
            userName: "user1",
            password: "password"
        });

    </script>
</head>
<body>
    <h1>MQTT Subscriber</h1>
    <div id="message"></div>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.