hook up actual messages from server component

method-inc · Mar 7, 2013 · bf3def1 · bf3def1
1 parent 26e1915
commit bf3def1
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 34 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -151,7 +151,7 @@ label {
   text-shadow: #fff 0 1px 1px;
 }
 
-p.note {
+.note {
   font-size: 11px;
   text-align: center;
   color: #50566b;

diff --git a/index.html b/index.html
@@ -34,6 +34,7 @@
   <script src="vendor/underscore/underscore-min.js" type="text/javascript"></script>
   <script src="vendor/backbone/backbone-min.js" type="text/javascript"></script>
   <script src="vendor/fastclick/fastclick.min.js" type="text/javascript"></script>
+  <script src="vendor/chatter/chatter.js" type="text/javascript"></script>
 
   <script src="js/views/base.js" type="text/javascript"></script>
   <script src="js/views/navigation.js" type="text/javascript"></script>

diff --git a/js/app.js b/js/app.js
@@ -41,16 +41,27 @@
       if(last_message && last_message.length > 0) {
         _.defer(function() { last_message[0].scrollIntoView(); });
       }
+
+      if(this.collection.length === 0) {
+        this.$noMessages = this.$('#chat-messages-empty');
+      }
     },
     renderMessage: function(message) {
-      return Templates.message(_.extend(message.toJSON(), {cid: message.cid }));
+      return Templates.message(_.extend(message.toJSON(), {
+        cid: message.cid,
+        date: new Date(message.get('timestamp'))
+      }));
     },
 
     addMessage: function(message) {
       var $message = $(this.renderMessage(message)),
           scrollParent = this.$('#chat-messages'),
-          isAtBottom = (scrollParent.scrollTop() + scrollParent.height() >= scrollParent[0].scrollHeight - 10);
+          isAtBottom = scrollParent.length && (scrollParent.scrollTop() + scrollParent.height() >= scrollParent[0].scrollHeight - 10);
       this.$('#chat-messages').append($message);
+      if(this.$noMessages) {
+        this.$noMessages.remove();
+        delete this.$noMessages;
+      }
       // scroll to message if they are already scrolled to the bottom
       if(isAtBottom) {
         $message[0].scrollIntoView();

diff --git a/js/model.js b/js/model.js
@@ -9,16 +9,11 @@
     initialize: function() {
       // initialize chat streaming here
       var self = this;
-      window.setInterval(function() {
-        //self.onMessage({ user: 'David', message: 'Another One!' });
-      }, 5000);
+      chatter.connect('http://chatterjs.herokuapp.com', function(data) {
+        self.onMessage(data);
+      }, 1000);
       this.fetchFromLocalStorage();
-      if(this.length == 0) {
-        _.each([
-          { user: 'David', message: 'Hello' },
-          { user: 'Jim', message: 'Hi there' }
-        ], this.onMessage, this);
-      }
+      chatter.getRecentHistory();
     },
 
     getUsername: function() {
@@ -33,6 +28,13 @@
     },
 
     onMessage: function(message) {
+      // filter out duplicates (i.e. if getRecentHistory gives us some we already
+      // had in localStorage)
+      if(this.any(function(old_message) {
+        return old_message.get('timestamp') === message.timestamp
+            && old_message.get('user') === message.user
+            && old_message.get('body') === message.body;
+      })) return;
       this.push(message);
       this.updateLocalStorage();
     },
@@ -52,10 +54,9 @@
     },
 
     send: function(message) {
-      this.onMessage({
-        user: this.username,
-        message: message,
-        mine: true
+      var self = this;
+      chatter.send(message, this.username, function(message) {
+        self.onMessage( _.extend(JSON.parse(message), { mine: true }) );
       });
     }
 

diff --git a/js/templates.js b/js/templates.js
@@ -3,28 +3,42 @@
    var Templates = exports.Templates; 
    Templates["message"] = function(data){
 var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
-__p+='<p class="chat-message-date">Today, 10:30AM</p>\n<li class="chat-message '+
+__p+='<p class="chat-message-date">\n  ';
+ var now = new Date(); 
+__p+='\n  ';
+ if(data.date.getDate() === now.getDate() && data.date.getMonth() === now.getMonth() && data.date.getFullYear() === now.getFullYear()) { 
+__p+='\n    Today\n  ';
+ } else { 
+__p+='\n    '+
+((__t=( data.date.getMonth()+1 ))==null?'':__t)+
+'/'+
+((__t=( data.date.getDate() ))==null?'':__t)+
+'/'+
+((__t=( data.date.getFullYear() ))==null?'':__t)+
+'\n  ';
+ } 
+__p+='\n  '+
+((__t=( data.date.getHours() ))==null?'':__t)+
+':'+
+((__t=( data.date.getMinutes() ))==null?'':__t)+
+'\n</p>\n<li class="chat-message '+
 ((__t=( (data.mine ? 'chat-message-mine' : '') ))==null?'':__t)+
-'"\n    data-message-id="'+
-((__t=( data.cid ))==null?'':__t)+
-'">\n  <h3 class="chat-message-user" >'+
+'" >\n  <h3 class="chat-message-user" >'+
 ((__t=( data.user ))==null?'':__t)+
 '</h3>\n  <p class="chat-message-text">'+
-((__t=( data.message ))==null?'':__t)+
+((__t=( data.body ))==null?'':__t)+
 '</p>\n</li>';
 return __p;
 }
 Templates["messages-list"] = function(data){
 var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
 __p+='';
  if(!data.has_messages) { 
-__p+='\n  <h2 class="chat-messages-empty">No Messages</h2>\n';
- } else { 
-__p+='\n  <ul id="chat-messages">'+
-((__t=( data.messages ))==null?'':__t)+
-'</ul>\n';
+__p+='\n  <h2 id="chat-messages-empty" class="note">No Messages</h2>\n';
  } 
-__p+='\n<div id="new-message">\n  <form id="new-message-form">\n  \t<input type="text" id="new-message-text" placeholder="Message" /><!--\n  \t--><button class="btn btn-send-message" id="new-message-button" type="submit" disabled>Send</button>\n  </form>\n</div>';
+__p+='\n<ul id="chat-messages">'+
+((__t=( data.messages ))==null?'':__t)+
+'</ul>\n<div id="new-message">\n  <form id="new-message-form">\n  \t<input type="text" id="new-message-text" placeholder="Message" /><!--\n  \t--><button class="btn btn-send-message" id="new-message-button" type="submit" disabled>Send</button>\n  </form>\n</div>';
 return __p;
 }
 Templates["navigation"] = function(data){

diff --git a/templates/message.html b/templates/message.html
@@ -1,6 +1,13 @@
-<p class="chat-message-date">Today, 10:30AM</p>
-<li class="chat-message <%= (data.mine ? 'chat-message-mine' : '') %>"
-    data-message-id="<%= data.cid %>">
+<p class="chat-message-date">
+  <% var now = new Date(); %>
+  <% if(data.date.getDate() === now.getDate() && data.date.getMonth() === now.getMonth() && data.date.getFullYear() === now.getFullYear()) { %>
+    Today
+  <% } else { %>
+    <%= data.date.getMonth()+1 %>/<%= data.date.getDate() %>/<%= data.date.getFullYear() %>
+  <% } %>
+  <%= data.date.getHours() %>:<%= data.date.getMinutes() %>
+</p>
+<li class="chat-message <%= (data.mine ? 'chat-message-mine' : '') %>" >
   <h3 class="chat-message-user" ><%= data.user %></h3>
-  <p class="chat-message-text"><%= data.message %></p>
+  <p class="chat-message-text"><%= data.body %></p>
 </li>
diff --git a/templates/messages-list.html b/templates/messages-list.html
@@ -1,8 +1,7 @@
 <% if(!data.has_messages) { %>
-  <h2 class="chat-messages-empty">No Messages</h2>
-<% } else { %>
-  <ul id="chat-messages"><%= data.messages %></ul>
+  <h2 id="chat-messages-empty" class="note">No Messages</h2>
 <% } %>
+<ul id="chat-messages"><%= data.messages %></ul>
 <div id="new-message">
   <form id="new-message-form">
   	<input type="text" id="new-message-text" placeholder="Message" /><!--

diff --git a/vendor/chatter/chatter.js b/vendor/chatter/chatter.js
@@ -0,0 +1,72 @@
+/**
+ * Chatter library
+ */
+
+(function(root) {
+
+  var last_received_message = {
+        timestamp: Date.now(),
+        body: '',
+        user: ''
+      };
+
+  var last_sent_message = {
+        timestamp: 0,
+        body: '',
+        user: ''
+      };
+
+  function Client(host) {}
+
+  Client.prototype.connect = function(host, fn, interval) {
+    this.host = host;
+    this.message_handler = fn;
+    this.interval = interval || 500;
+    this.listenForMessages();
+  };
+
+  Client.prototype.getRecentHistory = function() {
+    // get initial transcript
+    var self = this;
+    $.get(self.host, function(data) {
+      if (data) self.broadcast(data);
+    });
+  };
+
+  Client.prototype.send = function(message, user, callback) {
+    last_sent_message.body = message;
+    last_sent_message.user = user || "";
+    $.post(this.host+'/message', {message:message, user:user}, function(data) {
+      if (callback) callback(data);
+    });
+  };
+
+  Client.prototype.broadcast = function(messages) {
+
+    var lastOne = messages[messages.length - 1];
+    if (lastOne && lastOne.timestamp) last_received_message = lastOne;
+
+    for(var i = 0, m; i < messages.length; i++) {
+      m = messages[i];
+      // make sure new message isn't reflection of own message
+      if (m.body != last_sent_message.body && m.user != last_sent_message.user) {
+        this.message_handler(m);
+      }
+    }
+
+  };
+
+  Client.prototype.listenForMessages = function() {
+    var self = this;
+
+    setTimeout(function() {
+      $.get(self.host + "/since/" + last_received_message.timestamp, function(data) {
+        if (data) self.broadcast(data);
+        self.listenForMessages.call(self);
+      });
+    }, self.interval);
+  };
+
+  root.chatter = new Client();
+
+})(window);