node.js(jade+express+socket.io)でチャットアプリを作る

参考にしたのはこちらの資料。分かりやすい。

http://miyukki.mesolabs.com/

前回のexpressでひと通り入れた続き。socket.ioの部分を追加する

package.jsonを以下のようにしてinstall

{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.5.8"
    , "jade": ">= 0.0.1"
    , "socket.io": ">= 0.7"
  }
}

app.jsに以下を追加

// socket.io

var io = require('socket.io').listen(app);
var chatCount = 0;
var messages = []; // あとで使う
var chat = io.of('/chat').on('connection', function(socket) {
  chatCount++;
  chat.emit('count', {count: chatCount});

  // ブラウザからチャットテキストを受信した時の処理
  messages.forEach(function(data) {
    socket.emit('message', data);
  });
  socket.on('message', function(data) {
    data.timestamp = new Date().getTime();
    chat.emit('message', data);
    var length = messages.push(data);
    if (length > 100) {
      messages.shift();
    }
  });

  socket.on('disconnect', function() {
    chatCount--;
    chat.emit('count', {count: chatCount});
  });
});

client.jsを下記のように修正

var chat = io.connect('http://localhost:3000/chat');
chat.on('connect', function() {
  chat.on('count', function(data) {
    $('#count').text(data.count);
  });
  chat.on('message', function(data) {
    // サーバからチャットテキストを受信した時の処理
    var date = new Date(data.timestamp);
    $('#chat').append(
      '<div class="chatlog"><p>'
      + escape(data.name)
      + ': '
      + escape(data.text)
      + '</p><span class="date">'
      + date.toString()
      + '</span></div>');
    $('#chat').scrollTop(1000000);
  });
});

// サーバへチャットテキストを送信する処理
function send() {
  var name = $('#name').val();
  var text = $('#text').val();
  if (text && name) {
    chat.emit('message', {name: name, text: text});
    $('#text').val('');
  }
}

viewは以下のように修正

index.jade

h1= title
p 現在接続している人は
  span#count
  人います
#chat
form#form(onsubmit='send(); return false;')
  input#name(type='text', placeholder='Name')
  input#text(type='text', autocomplete='off')
  input(type='submit', value='送信')

layout.jade

!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js')
    //script(type='text/javascript', src='http://cdn.socket.io/stable/socket.io.js')  // これだとダメ！
    script(type='text/javascript', src='http://localhost:3000/socket.io/socket.io.js')
    script(type='text/javascript', src='/javascripts/client.js')
  body!= body

複数タブなどで開くと、カウントが増えてチャットもできる

http://localhost:3000/