Permalink
Browse files

hook up actual messages from server component

  • Loading branch information...
dbecher committed Mar 7, 2013
1 parent 26e1915 commit bf3def1bcce255eedc0825d2542390b28c22b89e
Showing with 139 additions and 34 deletions.
  1. +1 −1 css/styles.css
  2. +1 −0 index.html
  3. +13 −2 js/app.js
  4. +14 −13 js/model.js
  5. +25 −11 js/templates.js
  6. +11 −4 templates/message.html
  7. +2 −3 templates/messages-list.html
  8. +72 −0 vendor/chatter/chatter.js
View
@@ -151,7 +151,7 @@ label {
text-shadow: #fff 0 1px 1px;
}
-p.note {
+.note {
font-size: 11px;
text-align: center;
color: #50566b;
View
@@ -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>
View
@@ -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();
View
@@ -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 }) );
});
}
View
@@ -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){
View
@@ -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>
@@ -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" /><!--
View
@@ -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);

0 comments on commit bf3def1

Please sign in to comment.