Step 5 - Plug in Ably client-side and update UI

ably · Feb 3, 2017 · 4b3548a · 4b3548a
1 parent 2197a07
commit 4b3548a
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 3 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -3,8 +3,48 @@
 //= require_tree .
 
 $(function() {
-  var $actionButton = $('#action-btn');
+  /* Set up realtime library and authenticate using token issued from server */
+  var ably = new Ably.Realtime({ authUrl: '/auth' });
+  var publishChannel = ably.channels.get('chuck:ask');
+  var jokeChannel = ably.channels.get('chuck:jokes');
+
+  var $output = $('#output'),
+      $status = $('#status'),
+      $actionButton = $('#action-btn'),
+      $text = $('#text');
+
+  /* Subscribe to jokes published on this channel */
+  jokeChannel.subscribe(function(message) {
+    var $joke = $('<div class="joke">').text(message.data.joke);
+    var $stat = $('<div class="stat">').text("Chuck's API took " + message.data.chuckTime + "ms");
+    $output.prepend($('<div>').append($stat).append($joke));
+  });
+
   $actionButton.on('click', function() {
-    alert("Not yet implemented");
+    var text = $text.val();
+    /* Publish text to the Ably channel so that the WebHook is triggered and delivered to the Rails app */
+    publishChannel.publish('text', text, function(err) {
+      if (err) {
+        showStatus('Failed to publish request to Chuck!');
+        $text.val(text);
+        return;
+      }
+      clearStatus();
+    });
+    showStatus('Sending request to Chuck...');
+    $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/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -13,3 +13,88 @@
  *= require_tree .
  *= require_self
  */
+
+ body {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 0.85em;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+
+.col {
+  width: 50%;
+  float: left;
+  box-sizing: border-box;
+  padding: 0 1em;
+}
+
+input#text {
+  width: 100%;
+  margin-bottom: 1em;
+}
+
+#output > div {
+  box-shadow: 0 0 0.5em #bbb;
+  margin-bottom: 1.5em;
+}
+
+#output > div .joke {
+  padding: 5px;
+}
+
+#output > div .stat {
+  color: #999;
+  font-size: 0.8em;
+  float: right;
+  padding: 5px;
+}
+
+#status {
+  color: orange;
+  padding-left: 1em;
+}
+
+button {
+  -moz-box-shadow: 0px 1px 0px 0px #fff6af;
+  -webkit-box-shadow: 0px 1px 0px 0px #fff6af;
+  box-shadow: 0px 1px 0px 0px #fff6af;
+  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
+  background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
+  background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
+  background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
+  background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
+  background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
+  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
+  background-color:#ffec64;
+  -moz-border-radius:6px;
+  -webkit-border-radius:6px;
+  border-radius:6px;
+  border:1px solid #ffaa22;
+  display:inline-block;
+  cursor:pointer;
+  color:#333333;
+  font-family:Arial;
+  font-size:15px;
+  font-weight:bold;
+  padding:6px 24px;
+  text-decoration:none;
+  text-shadow:0px 1px 0px #ffee66;
+}
+
+button:hover {
+  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
+  background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
+  background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
+  background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
+  background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
+  background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
+  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
+  background-color:#ffab23;
+}
+
+button:active {
+  position:relative;
+  top:1px;
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -6,6 +6,7 @@
 
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <script src="//cdn.ably.io/lib/ably.min-0.9.js" crossorigin="anonymous"></script>
   </head>
 
   <body>