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