90 lines
3.4 KiB
HTML
90 lines
3.4 KiB
HTML
|
<!--
|
||
|
|
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>
|