html/index.html

   1 <!doctype html>
   2 <html>
   3 <title>Merica Terminal</title>
   4 <script type="text/javascript" src="//dejvice.merica.cz:5000/js" async></script>
   5 <script>
   6     var socket = new WebSocket(
   7         "ws://" + document.domain + ':' + location.port,
   8         "merica-terminal-protocol"
   9     );
  10
  11     function updateLocal(msg) {
  12         document.getElementById("localJSON").innerHTML = msg;
  13     }
  14
  15     socket.onopen = function() {
  16         console.log("socket open");
  17         updateLocal("socket open");
  18     }
  19
  20     socket.onclose = function() {
  21         console.log("socket closed");
  22         updateLocal("socket closed");
  23     }
  24
  25     socket.onmessage = function(msg) {
  26         updateLocal(msg.data);
  27         if (typeof updateRemote === "function") {
  28             updateRemote(msg.data);
  29         } else {
  30             if (localStorage) {
  31                 var now = Date.now();
  32                 localStorage.setItem(now, msg.data);
  33                 console.log(now + ": " + msg.data);
  34             }
  35         }
  36     }
  37
  38     function printLocalStorage() {
  39         var output = "";
  40         if (localStorage) {
  41             if (localStorage.length) {
  42                 for (var i = 0; i < localStorage.length; i++) {
  43                     output += localStorage.key(i) + ': ' + localStorage.getItem(localStorage.key(i)) + '<br>';
  44                 }
  45             } else {
  46                 output += "nobody here anymore!";
  47             }
  48         } else {
  49             output += "localStorage not supported";
  50         }
  51
  52         updateLocal(output);
  53     }
  54
  55     function clearLocalStorage() {
  56         if (localStorage) {
  57             localStorage.clear();
  58         }
  59     }
  60
  61     function sendReset() {
  62         socket.send("reset");
  63         console.log("reset");
  64     }
  65
  66     function sendClose() {
  67         socket.send("close");
  68         console.log("close");
  69     }
  70 </script>
  71
  72 <body>
  73
  74 <div id="local">
  75     <center>
  76     <h1>Merica Terminal</h1>
  77     <button onclick="sendReset()">reset</button>
  78     <span style="display:inline-block; width: 20pt;"></span>
  79     <button onclick="sendClose()">close</button>
  80     <span style="display:inline-block; width: 20pt;"></span>
  81     <button onclick="printLocalStorage()">storage</button>
  82     <span style="display:inline-block; width: 20pt;"></span>
  83     <button onclick="clearLocalStorage()">clear</button>
  84     <span style="display:inline-block; width: 20pt;"></span>
  85     <button onclick="location.reload()">reload</button>
  86     <p id="localJSON">no data received</p>
  87     </center>
  88 </div>
  89 <hr>
  90 <div id="remote"><center>all alone in a danger zone...</center></div>
  91
  92 </body>
  93 </html>