ping/index.html at master · uhst-examples-run/ping · 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title>UHST ping example</title>
    <meta name="description"
        content="Example showing how to use the User Hosted Secure Transmission framework to send simple ping messages.">
    <meta name="author" content="Stefan Dimitrov">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

<body>
    <main role="main">

        <!-- Main jumbotron for a primary marketing message or call to action -->
        <div class="jumbotron">
            <div class="container">
                <h1 class="display-3">Ping</h1>
                <p>The UHST implementation of ping measures the round-trip time for messages sent from the originating
                    browser
                    (client)
                    to a destination browser (host) that are echoed back to the source.
                    It shows how to create a basic UHST host and client, and confirm the establishing of network
                    connection between
                    them.</p>
            </div>
        </div>

        <div class="container">
            <!-- Example row of columns -->
            <div class="row">
                <div class="col-md-6">
                    <h2>Host Info</h2>
                    <p>HostId: <b id="hostId"></b></p>
                    <p>Diagnostic Log:</p>
                    <pre id="hostStatus"></pre>
                </div>
                <div class="col-md-6">
                    <h2>Client</h2>
                    <form onsubmit="return pingHost(event)">
                        <p>Enter remote HostId: <input id="pingHostId" type="text" placeholder="0000-0000"
                                pattern="[0-9]{4}-[0-9]{4}" maxlength="9" minlength="9" autofocus> <input type="submit"
                                value="Ping"></p>
                    </form>
                    <p>Result:</p>
                    <pre id="clientStatus"></pre>
                </div>
            </div>

            <hr>

        </div> <!-- /container -->

    </main>
    <script crossorigin src="https://unpkg.com/uhst/uhst.min.js"></script>
    <!-- <script src="../uhst-client-js/dist/uhst.min.js"></script> -->

    <script>
        var hostStatusEl = document.getElementById("hostStatus");
        var clientStatusEl = document.getElementById("clientStatus");
        var hostIdEl = document.getElementById("hostId");
        var pingHostIdEl = document.getElementById("pingHostId");
    </script>
    <script>
        const typeSizes = {
            "undefined": () => 0,
            "boolean": () => 4,
            "number": () => 8,
            "string": item => 2 * item.length,
            "object": item => !item ? 0 : Object
                .keys(item)
                .reduce((total, key) => sizeOf(key) + sizeOf(item[key]) + total, 0)
        };
        const sizeOf = value => typeSizes[typeof value](value);
    </script>

    <script>
        var uhstApi = new uhst.UHST({
            debug: true
        });
    </script>

    <script>
        // Host Script
        var host = uhstApi.host();
        hostStatusEl.innerText += "Initializing Host...\n";
        host.on("ready", () => {
            hostStatusEl.innerText += "Ready.\n";
            hostIdEl.innerText = host.hostId;
        });
        host.on("connection", function connection(ws) {
            hostStatusEl.innerText += "Host received client connection.\n";
            ws.on("open", function open() {
                hostStatusEl.innerText += "Host ready to use client connection.\n";
            });
            ws.on("diagnostic", function diagnostic(message) {
                hostStatusEl.innerText += message + "\n";
            });
            ws.on("message", function incoming(message) {
                var message = JSON.parse(message);
                ws.send(JSON.stringify({ "src": host.hostId, "seq": message.seq, "time": message.time }));
                hostStatusEl.innerText += "Received ping from " + message.src + ".\n";
            });
        });
    </script>

    <script>
        // Client Script
        var MAX_PINGS = 4;
        var client;
        var sequence = 0;

        function sendMessage() {
            if (sequence < MAX_PINGS) {
                client.send(JSON.stringify({ "src": host.hostId, "seq": sequence, "time": Date.now() })).then(function () {
                    sequence += 1;
                    setTimeout(sendMessage);
                });
            }
        }

        function pingHost(e) {
            e.preventDefault();
            var hostIdToPing = pingHostIdEl.value;
            sequence = 0;
            hostStatusEl.innerText += "Client connecting to " + hostIdToPing + "\n";
            client = uhstApi.join(hostIdToPing);
            client.on("error", function (error) {
                if (error instanceof uhst.InvalidHostId || error instanceof uhst.InvalidClientOrHostId) {
                    clientStatusEl.innerText += "Cannot resolve " + hostIdToPing + ": Invalid HostId.\n";
                }
            });
            client.on("diagnostic", function diagnostic(message) {
                hostStatusEl.innerText += message + "\n";
            });
            client.on("message", function (message) {
                var message = JSON.parse(message);
                var latency = Date.now() - message.time;
                clientStatusEl.innerText += sizeOf(message) + " bytes from " + message.src + ": seq=" + message.seq + " time=" + latency + " ms\n";
                if (message.seq + 1 == MAX_PINGS) {
                    // last message, disconnect
                    client.close();
                }
            });
            client.on("open", function () {
                hostStatusEl.innerText += "Client connection established.\n";
                sendMessage();
            });
            client.on("close", function () {
                hostStatusEl.innerText += "Client connection closed.\n";
                client = undefined;
            });
            return false;
        }
    </script>
</body>

</html>