websocket-tester/websocket-test.html at master · cpp-css/websocket-tester · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
  <meta charset="utf-8" />
  <title>WebSocket Test</title>

  <style>
    pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
    .string { color: green; }
    .number { color: darkorange; }
    .boolean { color: blue; }
    .null { color: magenta; }
    .key { color: DarkBlue; }
  </style>

  <script language="javascript" type="text/javascript">


  var wsUri = "ws://add_url_here";

  function init()
  {
    testWebSocket();
  }

  function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
  }

  function syntaxHighlight(json) {
    if (typeof json != 'string') {
         json = JSON.stringify(json, undefined, 100);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
  }

  function testWebSocket()
  {
    websocket = new WebSocket(wsUri);
    websocket.onmessage = function(evt) { onMessage(evt) };
  }

  function onMessage(evt)
  {
    output(syntaxHighlight(JSON.stringify(JSON.parse(evt.data), null, 3)));
  }

  window.addEventListener("load", init, false);

  </script>

  <body>
  <h2>WebSocket Test</h2>
  </body>
</html>