webForSerialPort/index.html at master · kylvia/webForSerialPort · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form{
            margin: 30px auto;
            width: 35%;
        }
    </style>
</head>
<body>
<form action="">
    <fieldset>
        <legend>http控制</legend>
        <br>
        <br>
        <div id="httpCtrol">
            <input type="button" sy-val = '01050001f000D80A' value="黄灯">
            <input type="button" sy-val = '01050002f000280A' value="绿灯">
            <input type="button" sy-val = '010500000000CDCA,0105000100009C0A,0105000200006C0A,0105000300003DCA' value="关闭所有">
        </div>
    </fieldset>
</form>
<br>
<form class="form">
    <fieldset>
        <legend>wobsocket 控制</legend>
        <br>
        <br>
        <div>
            <input type="button" onclick="clickDend('01050000ff008C3A,01050001f000D80A')" value="红黄灯">
            <input type="button" onclick="clickDend('01050001f000D80A')" value="黄灯">
            <input type="button" onclick="clickDend('01050002f000280A')" value="绿灯">
            <input type="button" onclick="clickDend('01050003f300793A')" value="蜂鸣器">
            <input type="button" onclick="clickDend('0105000300003DCA')" value="关闭蜂鸣器">
            <input type="button" onclick="clickDend('010500000000CDCA,0105000100009C0A,0105000200006C0A,0105000300003DCA')" value="关闭所有">
        </div>
        <br>
        <ul id="content"></ul>
        <input type="text" placeholder="请输入发送的消息" class="message" id="message"/>
        <input type="button" value="发送" id="send" class="connect"/>
        <input type="button" value="连接" id="connect" class="connect"/>
    </fieldset>
</form>
<script src="jquery.min.js"></script>
<script>
    var oUl=document.getElementById('content');
    var oConnect=document.getElementById('connect');
    var oSend=document.getElementById('send');
    var oInput=document.getElementById('message');
    var ws=null;
    oConnect.onclick=function(){
        ws=new WebSocket('ws://localhost:5000');
        ws.onopen=function(){
            oUl.innerHTML+="<li>客户端已连接</li>";
        }
        ws.onmessage=function(evt){
            oUl.innerHTML+="<li>"+evt.data+"</li>";
        }
        ws.onclose=function(){
            oUl.innerHTML+="<li>客户端已断开连接</li>";
        };
        ws.onerror=function(evt){
            oUl.innerHTML+="<li>"+evt.data+"</li>";

        };
    };
    oSend.onclick=function(){
        if(ws){
            ws.send(oInput.value);
        }
    }
    function clickDend(val){
        console.log(val)
        if(ws){
//            ws.send('010500000000CDCA,0105000100009C0A,0105000200006C0A,0105000300003DCA');
            ws.send(val);
        }
    }
</script>
<script>
    $(function () {
        $('#httpCtrol input').on('click',function () {
            var $this = $(this)
            $.ajax({
                method:'post',
                url:'http://localhost:1124/ledControl/on.do',
                data:{data:$this.attr('sy-val')},
                success:function (res) {
                    console.log(res)
                }
            })
        })
    })
</script>
</body>
</html>