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
69
70
71
72

{% import (
  "{{{ .Package }}}/app"
  "{{{ .Package }}}/app/controller/cutil"
  "{{{ .Package }}}/views/layout"
) %}

{% code type SocketTap struct {
  layout.Basic
} %}

{% func (p *SocketTap) Body(as *app.State, ps *cutil.PageState) %}
  <div class="card">
    <h3>Tap Activity</h3>
    <em>Shows all WebSocket traffic in real-time</em>
    <div class="overflow full-width">
      <table class="mt">
        <thead>
          <tr>
            <th>From</th>
            <th>Channel</th>
            <th>Command</th>
            <th>Param</th>
          </tr>
        </thead>
        <tbody id="tap-logs">
          <tr>
            <td colspan="4">Connecting...</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script>
    function open() {
      document.getElementById("tap-logs").innerHTML = "";
      addMessage({"from": ":tap", "channel": ":tap", "cmd": "open", "param": null});
    }
    function recv(m) {
      addMessage(m);
    }
    function err(e) {
      addMessage({"from": ":tap", "channel": ":tap", "cmd": "error", "param": e});
    }
    function addMessage(m) {
      const t = document.getElementById("tap-logs");
      const row = document.createElement("tr");

      const tdFrom = document.createElement("td");
      tdFrom.innerText = m.from;
      row.appendChild(tdFrom);

      const tdChannel = document.createElement("td");
      tdChannel.innerText = m.channel;
      row.appendChild(tdChannel);

      const tdCmd = document.createElement("td");
      tdCmd.innerText = m.cmd;
      row.appendChild(tdCmd);

      const tdParam = document.createElement("td");
      const pre = document.createElement("pre");
      pre.innerText = JSON.stringify(m.param, null, 2);
      tdParam.appendChild(pre);
      row.appendChild(tdParam);

      t.appendChild(row);
    }
    document.addEventListener("DOMContentLoaded", function() {
      new {{{ .Key }}}.Socket(true, open, recv, err, "/admin/sockets/tap-socket");
    });
  </script>
{% endfunc %}