Notifications

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

 1<!--
 2  Test/Development/Documentation page
 3  - enable web server file access
 4  - upload to web file path, e.g. /sd/dev/notifications.htm
 5  - open in framework by e.g. http://test1.local/#/dev/notifications.htm
 6-->
 7
 8<div class="panel panel-primary">
 9  <div class="panel-heading">Notification Test/Demo</div>
10  <div class="panel-body">
11  <h4>Receiver</h4>
12  <!--
13    You can use data-subscriptions to preconfigure subscriptions.
14    Note: types "info", "error" and "alert" get sent to all receivers.
15  -->
16  <pre id="log" class="receiver" data-subscriptions="notify/stream/myapp/#">I'm preconfigured to receive notify/stream/myapp/#</pre>
17  </div>
18  <div class="panel-footer">
19    <div>
20      <label for="topics">Test command:</label>
21      <input type="text" class="form-control font-monospace" id="cmd" value="notify raise text stream myapp.input 'my first stream'">
22      <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>
23      <button type="button" class="btn btn-default" id="action-exec">Execute</button>
24      <samp id="cmdres" />
25    </div>
26    <div>
27      <label for="topics">Topic subscription (separate topics by space):</label>
28      <input type="text" class="form-control font-monospace" id="topics" value="notify/stream/myapp/#">
29      <button type="button" class="btn btn-default" id="action-sub">Sub</button>
30      <button type="button" class="btn btn-default" id="action-unsub">Unsub</button>
31      <button type="button" class="btn btn-default" id="action-unsuball">Unsub all</button>
32    </div>
33  </div>
34</div>
35
36<script>
37
38// Receiver event handling:
39$('#log').on('msg:notify', function(ev, msg) {
40  // You normally should filter by type/subtype here, e.g.:
41  // if (subtype.startsWith('myapp')) { … }
42  // msg has type, subtype and value
43  // Dump the msg into the receiver to show the structure:
44  $(this).text(JSON.stringify(msg, null, 2));
45  
46  // A convenient way to transport complex data is JSON.
47  // To decode a JSON string, use JSON.parse().
48  // Note: JSON.parse() needs strict JSON syntax, i.e. quoted names.
49  var payload;
50  try {
51    payload = JSON.parse(msg.value);
52    if (payload) {
53      $(this).append("<div>Found JSON payload:</div>")
54        .append($("<div />").text(JSON.stringify(payload, null, 2)).html());
55      console.log(payload);
56    }
57  } catch(e) {
58    // no JSON
59    console.log(e);
60  }
61});
62
63// Topic subscription can be done on page load using the data-subscriptions attribute
64// and/or on demand using the subscribe & unsubscribe calls:
65$('#action-sub').on('click', function(ev) {
66  var topics = $('#topics').val();
67  $('#log').subscribe(topics).text("added " + topics);
68});
69// The receiver remembers the subscriptions and does an auto unsubscribe on unload.
70// You can also unsubscribe topics dynamically. Your data producer can check for
71// active subscriptions using the MyNotify.HasReader() method.
72$('#action-unsub').on('click', function(ev) {
73  var topics = $('#topics').val();
74  $('#log').unsubscribe(topics).text("removed " + topics);
75});
76$('#action-unsuball').on('click', function(ev) {
77  $('#log').unsubscribe().text("removed all subscriptions");
78});
79
80// Command handler:
81$('#action-exec').on('click', function(ev) {
82  var cmd = $('#cmd').val();
83  if (cmd) loadcmd(cmd, '#cmdres');
84});
85$('#cmd').on('keydown', function(ev) {
86  if (ev.which == 13) $('#action-exec').trigger('click');
87});
88
89</script>