public

Example Chat Application

  • Download Gist
html/adding-the-messages-template.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14
 
<script id="message" type="text/html">
<div class="message {{ type }}" id="{{ cssID }}">
<time datetime="{{ time }}">{{ humanTime }}</time>
 
<span class="name {{#isYou}} current-user {{/isYou}}">
{{ author }}:
</span>
 
<span class="body">{{ content }}</span>
</div>
</script>
 
<script src="/javascripts/lib/icanhaz.js"></script>
html/index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title>CHAT</title>
 
<script src="/javascripts/lib/jquery.js"></script>
<script src="/javascripts/lib/jquery.scrollto.js"></script>
<script src="/javascripts/lib/jquery.spire.js"></script>
 
<script src="/javascripts/application.js"></script>
</head>
 
<body>
<!-- more here later -->
</body>
</html>
html/interface-elements-with-overlay.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<div class="overlay">
<form action="#" method="post">
<input type="text" name="nick" placeholder="Name" />
 
<input type="submit" value="Join &rarr;">
</form>
</div>
 
<div class="messages"></div>
 
<footer>
<form action="#" method="post">
<input type="text" name="content" />
</form>
</footer>
html/interface-elements.html
HTML
1 2 3 4 5 6 7
<div class="messages"></div>
 
<footer>
<form action="#" method="post">
<input type="text" name="content" />
</form>
</footer>
javascripts/account-key.js
JavaScript
1 2 3
var spire = require('./spire.io.js');
 
spire.options.key = '<your account key>';
javascripts/join-chat-form-submission.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
 
$('.overlay form').submit(function(event){
event.stopPropagation();
event.preventDefault();
 
var form = this
, nick = $(form).find('input[name="nick"]').val() || 'Anonymous'
, message
;
 
// keep track of who you are for later, this will allow us to check if the
// person chatting is mentioned in another person's message.
window.currentUser = nick;
 
message = { channel: 'spire.io chat example'
, content: { type: 'system'
, body: 'joined'
, author: nick
}
};
 
// Send the message above, once it's sent trigger the passed in callback.
spire.messages.publish(message, function(err, message){
if (err) throw err; // really, you could do better
 
// Hide the overlay with the initial form.
$('.overlay').hide();
 
// Focus the input in the footer for a smoother User Experience.
$('footer form input').focus();
});
});
javascripts/new-application.js
JavaScript
1 2 3 4
 
$(document).ready(function(){
// The rest of the javascript will go here
});
javascripts/new-message-submission.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
 
$('footer form').submit(function(event){
event.stopPropagation();
event.preventDefault();
 
var form = this
, message = { channel: 'spire.io chat example'
, content: { author: currentUser
, body: $(form).find('input[name="content"]').val()
}
};
 
// No message content? don't do anything.
if (! message.content.body) return;
 
// Send the message constructed above, once the message is sent the
// `callback` will remove the submitted text and re-focus the input
spire.messages.publish(message, function(err, message){
if (err) throw err;
 
$(form).find('input').val('').focus();
});
});
javascripts/subscribe.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
spire.messages.subscribe('spire.io chat example', function(err, messages){
if (err) throw err; // you can do better...
 
$(messages).each(function(i, message){
var date = new Date(message.timestamp)
, element
;
 
// Add some helpers to the message object so the template
// can add some style hooks (classes).
message.content.isYou = message.author === currentUser;
message.content.cssID = 'message-' + message.id;
message.content.humanTime = [ date.getHours()
, ':'
, ('0' + date.getMinutes()).slice(-2)
].join('');
 
element = $(ich.message(message.content));
 
$('.messages')
.append(element)
.scrollTo(element);
});
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.