File: client.html

package info (click to toggle)
python-trio-websocket 0.12.2-1
  • links: PTS, VCS
  • area: main
  • in suites: forky, sid, trixie
  • size: 432 kB
  • sloc: python: 2,900; makefile: 41; sh: 17
file content (82 lines) | stat: -rw-r--r-- 2,340 bytes parent folder | download | duplicates (2)
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
<!DOCTYPE html>
<html>
<!--
This is a JavaScript client that can interact with server.py. Run the server
as follows:

    $ python server.py 127.0.0.1 8000

Then load this page in a browser. This JavaScript client has features similar to
client.py except limited by the DOM API. For example, the DOM API does not have
a ping() method for WebSockets.
-->
<head>
    <title>WebSocket Test</title>
</head>
<body>
    <h1>WebSocket Test</h1>
    <div id='output' style='border: 1px solid grey; padding: 1em;'>
        <h2>Output:</h2>
    </div>
    <div style='border: 1px solid grey; margin-top: 1em; padding: 1em;'>
        <h2>Commands:</h2>
        <pre>
send &lt;MESSAGE&gt;   -> send message
close [&lt;REASON&gt;] -> politely close connection with optional reason
        </pre>
        <p>
            <input id="command" type='text' placeholder='command'
            style="padding: 0.2em" disabled>
        </p>
    </div>
<script type='text/javascript'>
var ws;
var url = 'ws://localhost:8000/server';
addEventListener('load', function init() {
    connect();
});
function connect() {
    print('Connecting: ' + url);
    ws = new WebSocket(url);
    ws.onmessage = function(event) {
        print('Received: ' + event.data);
    }
    ws.onopen = function(event) {
        var input = document.getElementById("command");
        input.addEventListener("keyup", handleKey);
        input.disabled = false;
    }
    ws.onclose = function(event) {
        document.getElementById("command").disabled = true;
        print('Error: server closed the connection')
    }
    ws.onerror = function (event) {
        print('Connection error: (see console)');
        console.log(event);
    };
}
function handleKey(event) {
    if (event.key == "Enter") {
        var input = document.getElementById("command");
        var cmd = input.value;
        input.value = '';
        doCommand(cmd)
    }
}
function doCommand(cmd) {
    if (cmd.startsWith('send ')) {
        ws.send(cmd.substring(5));
    } else if (cmd.startsWith('close')) {
        ws.close(1000, cmd.substring(6))
    } else {
        print('Error: invalid command');
    }
}
function print(s) {
    var pre = document.createElement('pre');
    pre.appendChild(document.createTextNode(s));
    document.getElementById('output').appendChild(pre);
}
</script>
</body>
</html>