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> |