src/mojo/spy/test/spy_repl_test.html

   1 <!DOCTYPE html>
   2
   3 <html lang="en">
   4 <head>
   5   <meta charset="utf-8" />
   6   <title>Spy WS test</title>
   7   <style>
   8     hr {color:sienna;}
   9     body {
  10       background-color:#b0c4de;
  11       font:normal 16px/20px "Helvetica Neue", Helvetica, sans-serif;
  12     }
  13     #command {
  14       width:70%;
  15     }
  16     #status {
  17       background-color:#0094ff;
  18       width:50%;
  19       padding:4px;
  20     }
  21   </style>
  22 </head>
  23 <body>
  24 <header><h1>mojo spy</h1></header>
  25   <form>
  26     <input type="text" id="command" placeholder="enter spy command + enter" />
  27   </form>
  28   <p id="status">status: no connection</p>
  29   <p id="log">...</p>
  30   <script>
  31     function openConnection() {
  32       if (conn.readyState === undefined || conn.readyState > 1) {
  33         conn = new WebSocket('ws://127.0.0.1:42424');
  34         conn.onopen = function () {
  35           state.innerHTML = 'connected @port 42424';
  36         };
  37         conn.onmessage = function (event) {
  38           var message = event.data;
  39           log.innerHTML += "<br/>" + message;
  40         };
  41         conn.onclose = function (event) {
  42           state.innerHTML = 'connection closed';
  43         };
  44         conn.onerror = function (event) {
  45           state.innerHTML = 'got error';
  46         };
  47       }
  48     }
  49
  50     var addEvent = (function () {
  51       if (document.addEventListener) {
  52         return function (el, type, fn) {
  53           if (el && el.nodeName || el === window) {
  54             el.addEventListener(type, fn, false);
  55           } else if (el && el.length) {
  56             for (var i = 0; i < el.length; i++) {
  57               addEvent(el[i], type, fn);
  58             }
  59           }
  60         };
  61       } else {
  62         return function (el, type, fn) {
  63           if (el && el.nodeName || el === window) {
  64             el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
  65           } else if (el && el.length) {
  66             for (var i = 0; i < el.length; i++) {
  67               addEvent(el[i], type, fn);
  68             }
  69           }
  70         };
  71       }
  72     })();
  73
  74     var log = document.getElementById('log');
  75     var cmd = document.getElementById('command');
  76     var form = cmd.form;
  77     var conn = {};
  78     var state = document.getElementById('status');
  79
  80     if (window.WebSocket === undefined) {
  81       state.innerHTML = 'websockets not supported';
  82     } else {
  83       addEvent(form, 'submit', function (event) {
  84         event.preventDefault();
  85         if (conn.readyState === 1) {
  86           conn.send(JSON.stringify(cmd.value));
  87           log.innerHTML = 'data sent';
  88           cmd.value = '';
  89         }
  90       });
  91
  92       openConnection();
  93     }
  94   </script>
  95 </body>
  96 </html>