Step 4 - Plug in Ably client-side, update UI, auth

ably · Feb 2, 2017 · cf84468 · cf84468
1 parent db6fa91
commit cf84468
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 3 deletions.
diff --git 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 = $('<div class="filtered">').text(message.data.filtered);
+    var $stat = $('<div class="stat">').text("Neutrino took " + message.data.neutrinoTime + "ms");
+    $output.prepend($('<div>').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
@@ -3,6 +3,7 @@
     <title>Ably Reactor Queue and Neutrino Profanity Filter demo</title>
     <link rel="stylesheet" type="text/css" href="style.css">
     <script src="//code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
+    <script src="//cdn.ably.io/lib/ably.min-0.9.js" crossorigin="anonymous"></script>
     <script type="text/javascript" src="app.js"></script>
   </head>
   <body>

diff --git 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
@@ -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);