html/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <title>Websocket example</title>
   4
   5 <script>
   6     var socket = new WebSocket(
   7         "ws://" + document.domain + ':' + location.port,
   8         "dumb-increment-protocol"
   9     );
  10
  11     function update(id, msg) {
  12         document.getElementById(id).innerHTML = msg;
  13     }
  14
  15     socket.onopen = function() {
  16         console.log("socket open");
  17         update("text", "open");
  18     }
  19
  20     socket.onclose = function() {
  21         console.log("socket close");
  22         update("text", "closed");
  23     }
  24
  25     socket.onmessage = function(json) {
  26         var msg = JSON.parse(json.data);
  27
  28         update("json", "json: " + JSON.stringify(msg))
  29
  30         switch(msg.type) {
  31             case "empty":
  32                 update("text","");
  33                 break;
  34             case "rfid":
  35                 update("text",
  36                     "uid: " + msg.uid + "<br>" +
  37                     "card type: " + msg.card_type + "<br>" +
  38                     "uid size: " + msg.size + " bytes<br>" +
  39                     "sak: " + msg.sak
  40                 );
  41                 break;
  42         }
  43     }
  44
  45     function sendReset() {
  46         socket.send("reset");
  47         console.log("reset");
  48     }
  49
  50     function sendClose() {
  51         socket.send("close");
  52         console.log("close");
  53     }
  54 </script>
  55
  56 <body>
  57
  58 <button onclick="sendReset()">reset</button>
  59 <span style="display:inline-block; width: 20pt;"></span>
  60 <button onclick="sendClose()">close</button>
  61
  62 <p id="time">time.is
  63     <a href="https://time.is/" id="time_is_link" rel="nofollow"></a>
  64     <span id="Czechia_z721"></span>
  65     <script src="//widget.time.is/t.js"></script>
  66     <script>time_is_widget.init({Czechia_z721:{}});</script>
  67 </p>
  68
  69 <p id="json"></p>
  70 <p id="text"></p>
  71
  72 </body>
  73 </html>