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>