Unfinished websocket demo

2019-07-31 01:08:19 +02:00
parent 7a39c7e483
commit 9680949503
5 changed files with 360 additions and 42 deletions
--- a/www/main.html
+++ b/www/main.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>WebSocket DEMO</title>
+        <script src="js/struct/struct.js"></script>
+        <script src="js/fly-ws.js"></script>
+        <style>
+            html, body {
+                width: 100%;
+                height: 100%;
+                top: 0px;
+                left: 0px;
+                margin: 0px;
+                display: grid;
+                background: #141414;
+                color: #e7e7e7;
+            }
+
+            body {
+                grid-template: 100px 50px repeat(4, 1fr) / 50px calc(100vh - 150px) calc((100vh - 150px) / 4) 1fr;
+                grid-template-areas: "title          title          title           console"
+                                     "ws-status      ws-input       ws-connect      console"
+                                     ".              map            data-al         console"
+                                     ".              map            data-sp         console"
+                                     ".              map            data-ps         console"
+                                     ".              map            data-hp         console";
+            }
+
+            body > div {
+                display: grid;
+            }
+
+            .title {
+                align-self: center;
+                justify-self: center;
+            }
+
+            .ws {
+                align-self: center;
+                height: 30px;
+            }
+            .ws > * {
+                font-size: 20px;
+            }
+
+            .border {
+                border: 1px solid dimgray;
+            }
+
+            .ws-status {
+                justify-self: center;
+                width: 30px;
+                background: gray;
+            }
+            .online {
+                background: lime;
+            }
+            .offline {
+                background: red;
+            }
+
+            .ws-connect {
+                justify-self: start;
+            }
+
+            /* Yea... im seperating this */
+            .title {
+                grid-area: title;
+            }
+            .ws-status {
+                grid-area: ws-status;
+            }
+            .ws-input {
+                grid-area: ws-input;
+            }
+            .ws-connect {
+                grid-area: ws-connect;
+            }
+            .console {
+                grid-area: console;
+            }
+            .map {
+                grid-area: map;
+            }
+            .data-al {
+                grid-area: data-al;
+            }
+            .data-sp {
+                grid-area: data-sp;
+            }
+            .data-ps {
+                grid-area: data-ps;
+            }
+            .data-hp {
+                grid-area: data-hp;
+            }
+
+        </style>
+    </head>
+    <body>
+        <div class="title">
+            <h1>Websocket DEMO</h1>
+        </div>
+        <div class="ws ws-status border"></div>
+        <div class="ws ws-input">
+            <input id="addr" value="ws://127.0.0.1:7767"/>
+        </div>
+        <div class="ws ws-connect">
+            <button onclick="connect()">Connect</button>
+        </div>
+        <div class="map border"></div>
+        <div class="data-al border"></div>
+        <div class="data-sp border"></div>
+        <div class="data-ps border"></div>
+        <div class="data-hp border"></div>
+        <div class="console border" id="stdout"></div>
+        <script>
+            var fs;
+
+            function connect() {
+                fs = new FLYSocket(
+                    addr.value, // websocket addr
+                    // callbackData
+                    // callbackRaw
+                    );
+            }
+        </script>
+        <!--
+        <script>
+            function hex(str)
+            {
+                var arr1 = [];
+                for (var n = 0, l = str.length; n < l; n ++) 
+                {
+                    var hex = Number(str.charCodeAt(n)).toString(16);
+                    arr1.push(hex);
+                }
+                return arr1.join(' ');
+            }
+
+            var ws = new WebSocket("ws://127.0.0.1:7767/"),
+            messages = document.createElement('ul');
+            ws.onmessage = function (event) {
+                var messages = document.getElementsByTagName('ul')[0],
+                    message = document.createElement('li'),
+                    res = new Response(event.data).arrayBuffer().then(
+                        function(buff) {
+                            last = buff;
+                            data = new DataView(buff);
+
+                            data_str = "";
+                            for (let i = 0; i < data.byteLength; i++)
+                                data_str += String.fromCharCode(data.getInt8(i));
+
+                            content = document.createTextNode(data_str + " | " + hex(data_str));
+                            message.appendChild(content);
+                            messages.appendChild(message);
+                        }
+                    );
+            };
+            document.body.appendChild(messages);
+        </script>-->
+    </body>
+</html>