Skip to content

Instantly share code, notes, and snippets.

@truongtpa

truongtpa/Sử dụng HTML JS điều khiển LED qua MQTT

Created October 17, 2022 04:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save truongtpa/138b6ce30dd1f8c5b98f5e28a1cd637a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save truongtpa/138b6ce30dd1f8c5b98f5e28a1cd637a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Sử dụng HTML JS điều khiển LED qua MQTT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" type="text/javascript"></script>
</head>
<body>
<button class="bat">Bật LED</button>
<button class="tat">Tắt LED</button>
</body>
</html>
<script>
$('.bat').click(function(){
message = new Paho.MQTT.Message("on");
message.destinationName = "VLUTE/LED";
client.send(message);
});
$('.tat').click(function(){
message = new Paho.MQTT.Message("off");
message.destinationName = "VLUTE/LED";
client.send(message);
});
client = new Paho.MQTT.Client("broker.emqx.io", Number(8083), "clientId");
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
client.connect({onSuccess:onConnect});
function onConnect() {
console.log("onConnect");
// client.subscribe("World");
}
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
console.log("onConnectionLost:"+responseObject.errorMessage);
}
}
function onMessageArrived(message) {
console.log("onMessageArrived:"+message.payloadString);
}
</script>
@truongtpa
Copy link
Author

truongtpa commented Oct 17, 2022 •
edited
Loading

Tạo một file index.html và dán đoạn chương trình trên vào. Sau đó mở index.html bằng trình duyệt WEB

@truongtpa
Copy link
Author

truongtpa commented Oct 18, 2022 

    var anh_bat = "https://i.imgur.com/pPqLQx4.png";
    var anh_tat = "https://i.imgur.com/yRMydZv.png";
    $('.anh').click(function(){
        var anhht = $('.anh').attr('src');
        if(anhht === anh_bat){
            $('.anh').attr('src', anh_tat);
            message = new Paho.MQTT.Message("off");
            message.destinationName = "VLUTE/LED";
            client.send(message);
        }
        else{
            $('.anh').attr('src', anh_bat);
            message = new Paho.MQTT.Message("on");
            message.destinationName = "VLUTE/LED";
            client.send(message);
        }
    });

@truongtpa
Copy link
Author

truongtpa commented Oct 29, 2022

Gửi dữ liệu đi

message = new Paho.MQTT.Message("off");
message.destinationName = "VLUTE/LED";
client.send(message);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment