server/test.html at main · cant-sat/server · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>

<body style="color:antiquewhite; background-color:black;">
    <input type="text" name="Url" id="url" value="ws://localhost:12345">
    <input type="button" onclick="connect()" value="Connect" id="connect">
    <hr>
    <input type="text" name="Message" id="message" value="" disabled="disabled">
    <input type="button" onclick="sendMessage()" value="Send" disabled="disabled" id="send">
    <hr>
    <hr>
    <div id="mess"></div>
</body>

</html>

<script>
    var socket = null

    function connect() {

        // disables the first 2 ones
        document.getElementById("url").disabled = true
        document.getElementById("connect").disabled = true

        const url = document.getElementById("url").value

        socket = new WebSocket(url)

        socket.addEventListener("close", function (event) {
            console.log("closed")

            // enables the first 2 ones
            document.getElementById("url").disabled = false
            document.getElementById("connect").disabled = false

            // disables the other 2
            document.getElementById("send").disabled = true
            document.getElementById("message").disabled = true

            document.getElementById("mess").innerHTML += "<div style='color: red'><hr>disconnected <hr> </div> <hr>"
        })

        socket.addEventListener("message", function (event) {
            document.getElementById("mess").innerHTML += event.data.toString()
            document.getElementById("mess").innerHTML += "<hr>"
        })

        socket.addEventListener("open", function () {
            // enables the other 2 if it can join
            document.getElementById("send").disabled = false
            document.getElementById("message").disabled = false

            console.log("Succesfully joined")
        })

    }

    function sendMessage() {

        MessageSend = document.getElementById("message").value
        console.log(MessageSend)
        socket.send(MessageSend)

    }
</script>