207 lines
6.2 KiB
HTML
207 lines
6.2 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en" >
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=480" />
|
|||
|
|
<title>Websocket开关</title>
|
|||
|
|
<link rel="stylesheet" href="css/normalize.min.css">
|
|||
|
|
<link rel="stylesheet" href="css/style.css">
|
|||
|
|
<SCRIPT src="./main/jquery-1.8.3.min.js"></SCRIPT>
|
|||
|
|
<script src="./main/reconnecting-websocket.min.js" ></script>
|
|||
|
|
<SCRIPT src="main/JustGage.js"></SCRIPT>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>Websocket 开关控制器<a href="www.miuser.net" target="blank"></a></h1>
|
|||
|
|
<!-- Inspiration – https://dribbble.com/shots/525358-Buttons-Lights-Shadows?list=searches&tag=toggle_button&offset=10 -->
|
|||
|
|
<h2 class="headingOuter"><div align="center" id="online" >点击控制电源插座</div></h2>
|
|||
|
|
<div class="toggle toggle--knob">
|
|||
|
|
<input type="checkbox" checked onclick="setSwitch()" id="toggle--knob" class="toggle--checkbox">
|
|||
|
|
<label class="toggle--btn" for="toggle--knob"><span class="toggle--feature" data-label-on="on" data-label-off="off"></span></label>
|
|||
|
|
</div>
|
|||
|
|
<h2><div align="center" id="device_online" >设备状态未知</div></h2>
|
|||
|
|
<h2><div align="center" id="ID" >ID:0000000000 </div><div align="center" id="msg" >created by miuser</div></h2>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
<script>
|
|||
|
|
var socket;
|
|||
|
|
var TTL;
|
|||
|
|
var remoteSWStatus
|
|||
|
|
// window.onerror=function (message) {
|
|||
|
|
// try{
|
|||
|
|
// console.log(message);
|
|||
|
|
// }
|
|||
|
|
// catch(ex){}
|
|||
|
|
// }
|
|||
|
|
var repeatLoopUpdateSwitch
|
|||
|
|
window.onload = function(){
|
|||
|
|
try{
|
|||
|
|
connect();
|
|||
|
|
var ID=getUrlParam("ID");
|
|||
|
|
$("#ID").html("ID:"+ID);
|
|||
|
|
document.getElementsByTagName("title")[0].innerText = "开关 ID:"+ID;
|
|||
|
|
repeatLoopUpdateSwitch=setInterval("LoopUpdateSwitch()",3000)
|
|||
|
|
}
|
|||
|
|
catch(ex){}
|
|||
|
|
}
|
|||
|
|
window.onbeforeunload = function() {
|
|||
|
|
try {
|
|||
|
|
socket.close();
|
|||
|
|
socket = null;
|
|||
|
|
} catch(ex) {}
|
|||
|
|
};
|
|||
|
|
//从URL参数栏取得参数
|
|||
|
|
function getUrlParam(name)
|
|||
|
|
{
|
|||
|
|
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
|
|||
|
|
var r = window.location.search.substr(1).match(reg); //匹配目标参数
|
|||
|
|
if (r!=null) return decodeURI(r[2]); return null; //返回参数值
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//连接websocket
|
|||
|
|
function connect() {
|
|||
|
|
var host = "ws://box.miuser.net:9000/";
|
|||
|
|
socket = new ReconnectingWebSocket(host);
|
|||
|
|
try {
|
|||
|
|
socket.onopen = function(msg) {
|
|||
|
|
//alert("连接成功！");
|
|||
|
|
$("#msg").html("服务器连接成功");
|
|||
|
|
HeartBeat();
|
|||
|
|
};
|
|||
|
|
socket.onmessage = function(rsv) {
|
|||
|
|
var respond=rsv.data.toString();
|
|||
|
|
var source=respond.substring(7,9);
|
|||
|
|
var len=parseInt(respond.substring(2,4));
|
|||
|
|
var content=respond.substring(39,len-2);
|
|||
|
|
if (source==="01")
|
|||
|
|
{
|
|||
|
|
if(content==="Air208ONOK")
|
|||
|
|
{
|
|||
|
|
|
|||
|
|
remoteSWStatus="ON"
|
|||
|
|
}
|
|||
|
|
if(content==="Air208OFFOK")
|
|||
|
|
{
|
|||
|
|
remoteSWStatus="OFF"
|
|||
|
|
}
|
|||
|
|
TTL=600;
|
|||
|
|
sendstatus="Done";
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
socket.onclose = function(msg) {
|
|||
|
|
//alert("socket closed!")
|
|||
|
|
$("#msg").html("伺服器连接异常");
|
|||
|
|
};
|
|||
|
|
} catch(ex) {
|
|||
|
|
log(ex);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function HeartBeat() {
|
|||
|
|
var ID=getUrlParam("ID");
|
|||
|
|
var MM=getUrlParam("MM");
|
|||
|
|
var msg = "004832A08"+ID+MM+"1234Air208STAT05";
|
|||
|
|
|
|||
|
|
socket.send(msg);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
setInterval("HeartBeat()",300000);
|
|||
|
|
|
|||
|
|
function OnlineDetect() {
|
|||
|
|
if (TTL>0)
|
|||
|
|
{
|
|||
|
|
$("#device_online").html("设备正常");
|
|||
|
|
}else
|
|||
|
|
{
|
|||
|
|
$("#device_online").html("设备离线");
|
|||
|
|
}
|
|||
|
|
TTL=TTL-1;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
setInterval("OnlineDetect()",1000);
|
|||
|
|
|
|||
|
|
function SendCMD(cardcmd)
|
|||
|
|
{
|
|||
|
|
var ID=getUrlParam("ID");
|
|||
|
|
var MM=getUrlParam("MM");
|
|||
|
|
if(cardcmd=="on") socket.send("004832A08"+ID+MM+"1234Air208ON05");
|
|||
|
|
if(cardcmd=="off") socket.send("004932A08"+ID+MM+"1234Air208OFF05");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var repeatLoopExeCMD
|
|||
|
|
|
|||
|
|
function setSwitch()
|
|||
|
|
{
|
|||
|
|
sendstatus="";
|
|||
|
|
|
|||
|
|
//先执行一次，再每3s执行一次
|
|||
|
|
LoopExeCMD();
|
|||
|
|
repeatLoopExeCMD=setInterval("LoopExeCMD()",3000)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//发送指令，直到状态被同步
|
|||
|
|
function LoopExeCMD()
|
|||
|
|
{
|
|||
|
|
//设备不在线则不发送
|
|||
|
|
|
|||
|
|
if (TTL<0) return;
|
|||
|
|
//sw是反向的，true 是 关闭，false 是打开
|
|||
|
|
var sw=document.getElementById("toggle--knob")
|
|||
|
|
if ((sw.checked === true) &&(remoteSWStatus!="OFF"))
|
|||
|
|
{
|
|||
|
|
SendCMD("off");
|
|||
|
|
$("#online").html("正在更新开关状态...");
|
|||
|
|
remoteSWStatus="UNKNOWN";
|
|||
|
|
}
|
|||
|
|
else if ((sw.checked === false) &&(remoteSWStatus!="ON"))
|
|||
|
|
{
|
|||
|
|
SendCMD("on");
|
|||
|
|
$("#online").html("正在更新开关状态...");
|
|||
|
|
remoteSWStatus="UNKNOWN";
|
|||
|
|
}else
|
|||
|
|
{
|
|||
|
|
if (remoteSWStatus=="ON")
|
|||
|
|
{
|
|||
|
|
$("#online").html("开关状态：打开");
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if (remoteSWStatus=="OFF")
|
|||
|
|
{
|
|||
|
|
$("#online").html("开关状态：关闭");
|
|||
|
|
}
|
|||
|
|
clearInterval(repeatLoopExeCMD);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//更新程序打开时的开关状态
|
|||
|
|
function LoopUpdateSwitch()
|
|||
|
|
{
|
|||
|
|
//设备不在线则不发送
|
|||
|
|
if (TTL<0) return;
|
|||
|
|
//sw是反向的，true 是 关闭，false 是打开
|
|||
|
|
var sw=document.getElementById("toggle--knob")
|
|||
|
|
if ((remoteSWStatus!="ON")&&(remoteSWStatus!="OFF"))
|
|||
|
|
{
|
|||
|
|
HeartBeat();
|
|||
|
|
$("#online").html("正在更新开关状态...");
|
|||
|
|
remoteSWStatus="UNKNOWN";
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
{
|
|||
|
|
if (remoteSWStatus=="ON")
|
|||
|
|
{
|
|||
|
|
$("#online").html("开关状态：打开");
|
|||
|
|
$("#toggle--knob").attr("checked",false);
|
|||
|
|
}
|
|||
|
|
if (remoteSWStatus=="OFF")
|
|||
|
|
{
|
|||
|
|
$("#online").html("开关状态：关闭");
|
|||
|
|
$("#toggle--knob").attr("checked",true);
|
|||
|
|
}
|
|||
|
|
clearInterval(repeatLoopUpdateSwitch);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</html>
|