| Server IP : 27.254.66.5 / Your IP : 216.73.217.39 Web Server : Apache/2 System : Linux cs82.hostneverdie.com 3.10.0-1160.45.1.el7.x86_64 #1 SMP Wed Oct 13 17:20:51 UTC 2021 x86_64 User : technic2 ( 1951) PHP Version : 7.4.30 Disable Function : apache_child_terminate, apache_setenv, define_syslog_variables, escapeshellarg, escapeshellcmd,exec, fp, fput, highlight_file, ini_alter, ini_restore, inject_code, passthru,phpAds_remoteInfo, phpAds_XmlRpc,phpAds_xmlrpcDecode, phpAds_xmlrpcEncode, popen, posix_getpwuid, posix_kill, posix_mkfifo, posix_setpgid, posix_setsid,posix_setuid, posix_setuid, posix_uname,proc_open,proc_close, proc_get_status, proc_nice, proc_terminate, shell_exec, syslog, system, xmlrpc_entity_decode, show_source,sleep,pcntl_exec,virtual,suexec,dbmopen,dl,symlink,disk_free_space,diskfreespace,leak MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/technic2/domains/technicrayong.ac.th/public_html/old-website/ |
Upload File : |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgb(255, 255, 255);
-o-text-overflow: clip;
text-overflow: clip;
background: -webkit-linear-gradient(-45deg, rgb(236, 237, 220) 25%, rgba(0, 0, 0, 0) 25%), -webkit-linear-gradient(-135deg, rgb(236, 237, 220) 25%, rgba(0, 0, 0, 0) 25%), -webkit-linear-gradient(-225deg, rgb(236, 237, 220) 25%, rgba(0, 0, 0, 0) 25%), -webkit-linear-gradient(45deg, rgb(236, 237, 220) 25%, rgba(0, 0, 0, 0) 25%), rgb(23, 148, 236);
background: -moz-linear-gradient(135deg, rgb(236, 237, 220) 25%, rgba(0, 0, 0, 0) 25%), -moz-linear-gradient(225deg, rgb(236, 237, 220) 25%, rgba(0, 0, 0, 0) 25%), -moz-linear-gradient(315deg, rgb(236, 237, 220) 25%, rgba(0, 0, 0, 0) 25%), -moz-linear-gradient(45deg, rgb(236, 237, 220) 25%, rgba(0, 0, 0, 0) 25%), rgb(23, 148, 236);
background: linear-gradient(135deg, rgb(236, 237, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(225deg, rgb(236, 237, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(315deg, rgb(236, 237, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgb(236, 237, 220) 25%, rgba(0, 0, 0, 0) 25%), rgb(23, 148, 236);
background-position: -50px 0, -50px 0, 0 0, 0 0;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 100px 100px;
background-size: 100px 100px;
}
</style>
<script src="http://www.hivemq.com/demos/websocket-client/js/mqttws31.js" type="text/javascript"></script>
<script type="text/javascript">
//เปลี่ยน Broker, port และ ID
var t = new Date();
var client = new Messaging.Client("broker.hivemq.com", 8000, "prinya69" + t.getTime());
console.log("prinya69" + t.getTime());
var options = {
//connection attempt timeout in seconds
timeout: 3,
//Gets Called if the connection has successfully been established
onSuccess: function () {
alert("Connected");
},
//Gets Called if the connection could not be established
onFailure: function (message) {
alert("Connection failed: " + message.errorMessage);
}
};
//Attempt to connect
client.connect({
onSuccess: onConnect
});
function onConnect() {
console.log("connected");
client.subscribe("prinya0811660069", {
qos: 2
});
var message = new Messaging.Message("Lamp1=Off");
message.destinationName = "prinya0811660069";
message.qos = 2;
client.send(message);
var message = new Messaging.Message("Lamp2=Off");
message.destinationName = "prinya0811660069";
message.qos = 2;
client.send(message);
}
var txt_Lamp1 = "";
var txt_Lamp2 = "";
client.onMessageArrived = function (message) {
console.log(message.destinationName + " : " + message.payloadString);
if (message.payloadString.startsWith("Lamp1") == true) {
txt_Lamp1 = message.payloadString;
} else if (message.payloadString.startsWith("Lamp2") == true) {
txt_Lamp2 = message.payloadString;
}
if (txt_Lamp1 == "Lamp1=On") {
document.getElementById('Lamp1-xtx').innerHTML = "<i class=\"fa fa-lightbulb-o\" style=\"font-size: 100px; color: red\"></i> <p> On </p>";
} else if (txt_Lamp1 == "Lamp1=Off") {
document.getElementById('Lamp1-xtx').innerHTML = "<i class=\"fa fa-lightbulb-o\" style=\"font-size: 100px; color: white\"> </i> <p> Off </p>";
}
if (txt_Lamp2 == "Lamp2=On") {
document.getElementById('Lamp2-xtx').innerHTML = "<i class=\"fa fa-lightbulb-o\" style=\"font-size: 100px; color: green\"></i> <p> On </p>";
} else if (txt_Lamp2 == "Lamp2=Off") {
document.getElementById('Lamp2-xtx').innerHTML = "<i class=\"fa fa-lightbulb-o\" style=\"font-size: 100px; color: white\"> </i> <p> Off </p>";
}
}
function onLamp1() {
if (txt_Lamp1 == "Lamp1=On") {
var message = new Messaging.Message("Lamp1=Off");
message.destinationName = "prinya0811660069";
message.qos = 2;
client.send(message);
} else if (txt_Lamp1 == "Lamp1=Off") {
var message = new Messaging.Message("Lamp1=On");
message.destinationName = "prinya0811660069";
message.qos = 2;
client.send(message);
} else {
var message = new Messaging.Message("Lamp1=Off");
message.destinationName = "prinya0811660069";
message.qos = 2;
client.send(message);
}
}
function onLamp2() {
if (txt_Lamp2 == "Lamp2=On") {
var message = new Messaging.Message("Lamp2=Off");
message.destinationName = "prinya0811660069";
message.qos = 2;
client.send(message);
} else if (txt_Lamp2 == "Lamp2=Off") {
var message = new Messaging.Message("Lamp2=On");
message.destinationName = "prinya0811660069";
message.qos = 2;
client.send(message);
} else {
var message = new Messaging.Message("Lamp2=Off");
message.destinationName = "prinya0811660069";
message.qos = 2;
client.send(message);
}
}
</script>
</head>
<body>
<br>
<br>
<div style="position: absolute; left: 20%; right: 20%; text-align: center; background-color: skyblue">
<br>
<div>IOT On-Off</div>
<br>
<button name="Lamp1" onclick="onLamp1()">
<div id="Lamp1-xtx">
</div>
</button>
<br>
<br>
<button name="Lamp2" onclick="onLamp2()">
<div id="Lamp2-xtx">
</div>
</button>
<br>
<br>
</div>
</body>
</html>