Notifications

notifications.htm (hint: right click, save as)

 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!--
  Test/Development/Documentation page
  - enable web server file access
  - upload to web file path, e.g. /sd/dev/notifications.htm
  - open in framework by e.g. http://test1.local/#/dev/notifications.htm
-->

<div class="panel panel-primary">
  <div class="panel-heading">Notification Test/Demo</div>
  <div class="panel-body">
  <h4>Receiver</h4>
  <!--
    You can use data-subscriptions to preconfigure subscriptions.
    Note: types "info", "error" and "alert" get sent to all receivers.
  -->
  <pre id="log" class="receiver" data-subscriptions="notify/stream/myapp/#">I'm preconfigured to receive notify/stream/myapp/#</pre>
  </div>
  <div class="panel-footer">
    <div>
      <label for="topics">Test command:</label>
      <input type="text" class="form-control font-monospace" id="cmd" value="notify raise text stream myapp.input 'my first stream'">
      <p>JSON example: <code class="autoselect">notify raise text stream myapp.input '{"my":"JSON stream","pi":3.141,"fib":[1,2,3,5,8,13]}'</code></p>
      <button type="button" class="btn btn-default" id="action-exec">Execute</button>
      <samp id="cmdres" />
    </div>
    <div>
      <label for="topics">Topic subscription (separate topics by space):</label>
      <input type="text" class="form-control font-monospace" id="topics" value="notify/stream/myapp/#">
      <button type="button" class="btn btn-default" id="action-sub">Sub</button>
      <button type="button" class="btn btn-default" id="action-unsub">Unsub</button>
      <button type="button" class="btn btn-default" id="action-unsuball">Unsub all</button>
    </div>
  </div>
</div>

<script>

// Receiver event handling:
$('#log').on('msg:notify', function(ev, msg) {
  // You normally should filter by type/subtype here, e.g.:
  // if (subtype.startsWith('myapp')) { … }
  // msg has type, subtype and value
  // Dump the msg into the receiver to show the structure:
  $(this).text(JSON.stringify(msg, null, 2));
  
  // A convenient way to transport complex data is JSON.
  // To decode a JSON string, use JSON.parse().
  // Note: JSON.parse() needs strict JSON syntax, i.e. quoted names.
  var payload;
  try {
    payload = JSON.parse(msg.value);
    if (payload) {
      $(this).append("<div>Found JSON payload:</div>")
        .append($("<div />").text(JSON.stringify(payload, null, 2)).html());
      console.log(payload);
    }
  } catch(e) {
    // no JSON
    console.log(e);
  }
});

// Topic subscription can be done on page load using the data-subscriptions attribute
// and/or on demand using the subscribe & unsubscribe calls:
$('#action-sub').on('click', function(ev) {
  var topics = $('#topics').val();
  $('#log').subscribe(topics).text("added " + topics);
});
// The receiver remembers the subscriptions and does an auto unsubscribe on unload.
// You can also unsubscribe topics dynamically. Your data producer can check for
// active subscriptions using the MyNotify.HasReader() method.
$('#action-unsub').on('click', function(ev) {
  var topics = $('#topics').val();
  $('#log').unsubscribe(topics).text("removed " + topics);
});
$('#action-unsuball').on('click', function(ev) {
  $('#log').unsubscribe().text("removed all subscriptions");
});

// Command handler:
$('#action-exec').on('click', function(ev) {
  var cmd = $('#cmd').val();
  if (cmd) loadcmd(cmd, '#cmdres');
});
$('#cmd').on('keydown', function(ev) {
  if (ev.which == 13) $('#action-exec').trigger('click');
});

</script>