jxson
10/4/2011 - 1:20 AM

Example Chat Application

Example Chat Application

subscribe.js
content_copyfile_download
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);
  });
});
new-message-submission.js
content_copyfile_download

$('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();
  });
});
new-application.js
content_copyfile_download

$(document).ready(function(){
  // The rest of the javascript will go here
});
join-chat-form-submission.js
content_copyfile_download

$('.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();
  });
});
account-key.js
content_copyfile_download
var spire = require('./spire.io.js');

spire.options.key = '<your account key>';
interface-elements.html
content_copyfile_download
<div class="messages"></div>

<footer>
  <form action="#" method="post">
    <input type="text" name="content" />
  </form>
</footer>
interface-elements-with-overlay.html
content_copyfile_download
<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>
index.html
content_copyfile_download
<!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>
adding-the-messages-template.html
content_copyfile_download

<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>