diff --git a/public/app.js b/public/app.js
index b1d86d45..533486bc 100644
--- a/public/app.js
+++ b/public/app.js
@@ -1,6 +1,48 @@
$(function() {
- var $actionButton = $('#action-btn');
+ /* Set up realtime library and authenticate using token issued from server */
+ var ably = new Ably.Realtime({ authUrl: '/auth' });
+ var filteredChannel = ably.channels.get('neutrino:filtered');
+ var publishChannel = ably.channels.get('neutrino:raw');
+
+ var $output = $('#output'),
+ $status = $('#status'),
+ $actionButton = $('#action-btn'),
+ $text = $('#text');
+
+ /* Subscribe to filtered text published on this channel */
+ filteredChannel.subscribe(function(message) {
+ var $filtered = $('
').text(message.data.filtered);
+ var $stat = $('
').text("Neutrino took " + message.data.neutrinoTime + "ms");
+ $output.prepend($('
').append($stat).append($filtered));
+ });
+
$actionButton.on('click', function() {
- alert("Not yet implemented");
+ var text = $text.val();
+ if (text.replace(' ') != '') {
+ /* Publish text to the Ably channel so that the queue worker receives it via queues */
+ publishChannel.publish('text', text, function(err) {
+ if (err) {
+ showStatus('Failed to publish text!');
+ $text.val(text);
+ return;
+ }
+ clearStatus();
+ });
+ showStatus('Sending unfiltered bad text...');
+ $text.val('');
+ }
});
+
+ ably.connection.on('connecting', function() { showStatus('Connecting to Ably...'); });
+ ably.connection.on('connected', function() { clearStatus(); });
+ ably.connection.on('disconnected', function() { showStatus('Disconnected from Ably...'); });
+ ably.connection.on('suspended', function() { showStatus('Disconnected from Ably for a while...'); });
+
+ function showStatus(text) {
+ $status.text(text).show();
+ }
+
+ function clearStatus() {
+ $status.fadeOut(750);
+ }
});
diff --git a/public/index.html b/public/index.html
index 1541f925..d6512df6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,7 @@
Ably Reactor Queue and Neutrino Profanity Filter demo
+
diff --git a/public/style.css b/public/style.css
index abb3f7b5..db8dfdfb 100644
--- a/public/style.css
+++ b/public/style.css
@@ -20,11 +20,22 @@ textarea#text {
margin-bottom: 1em;
}
-#output div {
+#output > div {
box-shadow: 0 0 0.5em #bbb;
margin-bottom: 1.5em;
}
+#output > div p {
+ padding: 5px;
+}
+
+#output > div .stat {
+ color: #999;
+ font-size: 0.8em;
+ float: right;
+ padding: 5px;
+}
+
#status {
color: orange;
padding-left: 1em;
diff --git a/server.js b/server.js
index 2cc3af3b..917bffc4 100644
--- a/server.js
+++ b/server.js
@@ -11,6 +11,18 @@ const rest = new Ably.Rest({ key: ApiKey });
/* Start a web server */
var app = Express();
+/* Issue token requests to browser clients sending a request to the /auth endpoint */
+app.get('/auth', function (req, res) {
+ rest.auth.createTokenRequest(function(err, tokenRequest) {
+ if (err) {
+ res.status(500).send('Error requesting token: ' + JSON.stringify(err));
+ } else {
+ res.setHeader('Content-Type', 'application/json');
+ res.send(JSON.stringify(tokenRequest));
+ }
+ });
+});
+
/* Server static HTML files from /public folder */
app.use(Express.static('public'));
app.listen(3000);