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;
   7
   8     function connect() {
   9         console.log("connecting...");
  10         socket = new WebSocket(
  11             "ws://" + document.domain + ':' + location.port,
  12             "merica-terminal-protocol"
  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             delete socket;
  24             setTimeout(connect, 10000);
  25         }
  26
  27         socket.onmessage = function(msg) {
  28             updateLocal(msg.data);
  29             if (typeof updateRemote === "function") {
  30                 updateRemote(msg.data);
  31             } else {
  32                 if (localStorage) {
  33                     var now = Date.now();
  34                     localStorage.setItem(now, msg.data);
  35                     console.log(now + ": " + msg.data);
  36                 }
  37             }
  38         }
  39     }
  40
  41     connect();
  42
  43     function updateLocal(msg) {
  44         document.getElementById("localJSON").innerHTML = msg;
  45     }
  46     function printLocalStorage() {
  47         var output = "";
  48         if (localStorage) {
  49             if (localStorage.length) {
  50                 for (var i = 0; i < localStorage.length; i++) {
  51                     output += localStorage.key(i) + ': ' + localStorage.getItem(localStorage.key(i)) + '<br>';
  52                 }
  53             } else {
  54                 output += "nobody here anymore!";
  55             }
  56         } else {
  57             output += "localStorage not supported";
  58         }
  59
  60         updateLocal(output);
  61     }
  62
  63     function clearLocalStorage() {
  64         if (localStorage) {
  65             localStorage.clear();
  66         }
  67     }
  68
  69     function sendReset() {
  70         socket.send("reset");
  71         console.log("reset");
  72     }
  73
  74     function sendClose() {
  75         socket.send("close");
  76         console.log("close");
  77     }
  78 </script>
  79
  80 <body>
  81
  82 <div id="local">
  83     <center>
  84     <h1>Merica Terminal</h1>
  85     <button onclick="sendReset()">reset</button>
  86     <span style="display:inline-block; width: 20pt;"></span>
  87     <button onclick="sendClose()">close</button>
  88     <span style="display:inline-block; width: 20pt;"></span>
  89     <button onclick="printLocalStorage()">storage</button>
  90     <span style="display:inline-block; width: 20pt;"></span>
  91     <button onclick="clearLocalStorage()">clear</button>
  92     <span style="display:inline-block; width: 20pt;"></span>
  93     <button onclick="location.reload()">reload</button>
  94     <p id="localJSON">no data received</p>
  95     </center>
  96     <hr>
  97 </div>
  98 <div id="remote"><center>all alone in a danger zone...</center></div>
  99
 100 </body>
 101 </html>