PoiQQBot-Py/WebControl.html at master · PoiCraft/PoiQQBot-Py · 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
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
  <head>
    <title>PoiQQBot</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        background-color: black;
        color: white;
      }
    #console {
        overflow:hidden;
        width:100%
        height:100vh;
    }
    .name{
        color: Gainsboro;
        width: 80px;
        text-align: right;
    }
    .name_cmd{
        background-color: DodgerBlue;
    }
    .value{
        width:calc(100% - 80px);
    }
    .err{
        color: red;
    }
    .ok {
        color: LawnGreen;
    }
    body{
        padding: 5px;
    }
    </style>
  </head>
  <body>
    <div id="console">
    <p>欢迎使用 PoiQQBot WebControl</p>
    <div id="re">
    </div>
    <div id="inp">
    <small class="name name_cmd">PoiQQBot></small>
    <input id="cmd" class="value" style="">
    </div>
    </div>
    <script>

    var element = document.getElementById('console')
    var cmd = document.getElementById("cmd")
    var re = document.getElementById("re")
    var inp = document.getElementById("inp")

    var ws = new WebSocket("ws://127.0.0.1:30000")

    ws.onopen = function(){
        _c = document.createElement("p")
        _c.innerHTML="<strong class='ok'>->连接已建立<-</strong>"
        re.appendChild(_c)
        inp.style.display="block"
        cmd.focus()
    }

    ws.onmessage = function(e){
        _c = document.createElement("p")
        _c.innerHTML="<small><span class='name'>--></span><span class='value'>"+e.data+"</span></small>"
        re.appendChild(_c)
        inp.style.display="block"
        cmd.focus()
    }

    ws.onerror = function(){
        inp.style.display="none"
        _c = document.createElement("p")
        _c.innerHTML="<strong class='err'>->连接出现问题<-</strong>"
        re.appendChild(_c)
    }
    ws.oncolsed = function(){
        inp.style.display="none"
        _c = document.createElement("p")
        _c.innerHTML="<strong class='err'>->连接已断开<-</strong>"
        re.appendChild(_c)
    }
    cmd.focus()

    window.document.onkeydown = function(e){
        var keycode = event.keyCode

        if (keycode == 13) {
        _c = document.createElement("p")
        _c.innerHTML="<small><span class='name name_cmd'>PoiQQBot></span> <span class='value'>"+cmd.value+"</span></small>"
        re.appendChild(_c)
        ws.send(cmd.value)
        cmd.value=""
        inp.style.display="none"
        }
    }

    </script>
  </body>
</html>