summaryrefslogtreecommitdiff
path: root/index.html
blob: 1a5afe72ca79c9d8e62424d20436102ea4711cf4 (plain)
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
<!doctype html>
<html>
    <head>
        <title>Vainsocial backend status</title>
    </head>
    <body>
        <form id="update-form">
            <input type="text">
            <input type="submit" value="Update">
        </form>

        <ul id="updates"></ul>

        <script src="https://cdn.jsdelivr.net/sockjs/1/sockjs.min.js"></script>
        <script type="text/javascript" src="/js/webstomp.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script>
            let client;
            // set up the client
            if ('WebSocket' in window && (typeof WebSocket === 'function' || typeof WebSocket === 'object')) {
                client = webstomp.client("ws://localhost:15674/ws");
            } else {
                // http fallback
                client = webstomp.over(SockJS("http://localhost:15674/stomp"));
            }
            // connect
            client.connect("web", "web", () => {
                $("#updates").append(
                    $("<li>")
                    .text("connected to socket")
                    .css("color", "purple")
                );
            }, (err) => {
                $("#updates").append(
                    $("<li>")
                    .text("error connecting to socket: " + JSON.stringify(err))
                    .css("color", "red")
                );
            });

            $("#update-form").submit((e) => {
                let name = $("input:first").val();
                // subscribe
                client.subscribe("/topic/player." + name, (msg) => {
                    $("#updates").append(
                        $("<li>")
                        .text(msg.body)
                        .css("color", "grey")
                    );

                    if (msg.body == "search_fail")  {
                        $("#updates").append(
                            $("<li>")
                            .text(name + ": not found")
                            .css("color", "red")
                        );
                    }
                    if (msg.body == "search_success")  {
                        $("#updates").append(
                            $("<li>")
                            .text(name + ": found")
                            .css("color", "green")
                        );
                    }
                    if (msg.body == "matches_update")  {
                        $("#updates").append(
                            $("<li>")
                            .text(name + ": new match(es) available")
                            .css("color", "orange")
                        );
                    }
                    if (msg.body == "stats_update")  {
                        $("#updates").append(
                            $("<li>")
                            .text(name + ": player profile stats updated")
                            .css("color", "orange")
                        );
                    }

                    msg.ack();
                }, {"ack": "client"});

                // POST
                $.post("/api/player/" + name + "/search");
                e.preventDefault();
            });
        </script>
    </body>
</html>