Step 4 - Plugin in Ably client-side and update UI

mattheworiordan · mattheworiordan · commit 0ab1cb6b66aa · 2017-01-26T17:02:02.000Z
diff --git a/example.js b/example.js
@@ -12,6 +12,18 @@ var rest = new Ably.Rest({ key: ApiKey });
 var express = require('express');
 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);
diff --git a/public/app.js b/public/app.js
@@ -1,6 +1,49 @@
 $(function() {
-  var $askButton = $('#ask-btn');
+  /* Set up realtime library and authenticate using token issued from server */
+  var ably = new Ably.Realtime({ authUrl: '/auth' });
+  var answersChannel = ably.channels.get('wolfram:answers');
+  var questionsChannel = ably.channels.get('wolfram:questions');
+
+  var $answers = $('#answers'),
+      $status = $('#status'),
+      $askButton = $('#ask-btn'),
+      $question = $('#question');
+
+  /* Subscribe to answers published on this channel */
+  answersChannel.subscribe(function(message) {
+    var $question = $('<div class="question">').text(message.data.question);
+    var $answer = $('<div class="answer">').text(message.data.answer);
+    var $stat = $('<div class="stat">').text("Wolfram took " + message.data.wolframTime + "ms");
+    $answers.prepend($('<div>').append($stat).append($question).append($answer));
+  });
+
   $askButton.on('click', function() {
-    alert("Not yet implemented");
+    var question = $question.val();
+    if (question.replace(' ') != '') {
+      /* Publish question to the Ably channel so that the queue worker receives it via queues */
+      questionsChannel.publish('question', question, function(err) {
+        if (err) {
+          showStatus('Failed to publish question!');
+          $question.val(question);
+          return;
+        }
+        clearStatus();
+      });
+      showStatus('Sending question...');
+      $question.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 Wolfram Alpha 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>
@@ -17,7 +18,7 @@ <h2>Questions</h2>
     </div>
     <div class="col">
       <h2>Answers</h2>
-      <div id="answer-images"></div>
+      <div id="answers"></div>
     </div>
   </body>
 </html>
diff --git a/public/style.css b/public/style.css
@@ -20,11 +20,31 @@ textarea#question {
   margin-bottom: 1em;
 }
 
-img {
+#answers > div {
   box-shadow: 0 0 0.5em #bbb;
   margin-bottom: 1.5em;
 }
 
+#answers > div .question {
+  color: orange;
+  font-style: italic;
+  padding: 5px;
+  float: left;
+}
+
+#answers > div .stat {
+  color: #999;
+  font-size: 0.8em;
+  float: right;
+  padding: 5px;
+}
+
+#answers > div .answer {
+  font-weight: bold;
+  padding: 5px;
+  clear: both;
+}
+
 #status {
   color: orange;
   padding-left: 1em;
