web采用MQTT协议远程控制LED灯

最新推荐文章于 2025-07-01 16:38:47 发布

原创最新推荐文章于 2025-07-01 16:38:47 发布 · 4.6k 阅读

14 ·

CC 4.0 BY-SA版权

MQTT 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用MQTT协议的简单发布与订阅测试案例。测试环境包括Windows 10下的Firefox浏览器作为发布客户端，Ubuntu 12.04作为订阅客户端及MQTT代理服务器。通过JavaScript实现网页端的连接、断开、发送灯开关命令等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

测试环境

mqtt_client (Publish) firefox win10

mqtt_broker mosquitto ubuntu 12.04

web端需要用到JavaScript Client 下载地址

mqtt_client (Publish)代码

publish.html

<!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>
    <script src="js/mqttws31.js" type="text/javascript"></script>
    <title>test_button</title>
    <script type="text/javascript">
        var client = new Messaging.Client("127.0.0.1",8000,"myclientid_" + parseInt(Math.random() * 100,10));
        client.onConnectionLost = function(responseObject)
        {
            alert("connection lost:"+responseObject.errorMessage);
        }
        var options = 
        {
            timeout: 3,
            keepAliveInterval:60,
            onSuccess:function()
            {
                //document.getElementById("status").innerHTML = "connected to server";
                alert("connected to server");
            },
            onFailure:function(message)
            {
                //document.getElementById("status").innerHTML = "connect failed";
                alert("connection failed to server");
            }
        }

        function connect()
        {
            //document.getElementById("status").innerHTML = "connecting";
                alert("connecting");
            client.connect(options);
        }

        function disconnect()
        {
            client.disconnect();
                alert("disconnect");
            //document.getElementById("status").innerHTML = "disconnect from server";

        }
        function lamp_on()
        {
            var str = '{"cmd":1}';
            var message = new Messaging.Message(str);
            message.destinationName = "cmd";
            client.send(message);
        }
        function lamp_off()
        {
            var str = '{"cmd":0}';
            var message = new Messaging.Message(str);
            message.destinationName = "cmd";
            client.send(message);
        }
    </script>
  </head>
  <body>
  <div align="center">
      <input type="button" name="switch_on" value="switch_on" onClick="lamp_on()">
      <input type="button" name="switch_off" value="switch_off" onClick="lamp_off()">
      <input type="button" name="connect" value="connect" onClick="connect()" >
      <input type="button" name="disconnect" value="disconnect" onClick="disconnect()" >
  </div>
  <div id="status" align="center">
  </div>
  </body>
</html>