node.jsでchatアプリっぽいもの作るメモ

JavaScript Node.js

ようやくNode.jsをさわってみた。
インストール大変そうなイメージを勝手に持っていたけど、全然そんなことはなく

$ wget http://nodejs.org/dist/node-v0.2.5.tar.gz
$ tar zxvf node-v0.2.5.tar.gz
$ cd node-v0.2.5
$ ./configure --prefix=$HOME/local
$ make
$ make install

で普通に行けた。make testでなんかエラー出てた気もするけどキニシナイ
あとはnpm。書いてある通り
npm

$ curl http://npmjs.org/install.sh | sh

でおk。
試しに幾つかインストールしてみた。
Express - Node.js web application framework
EJS - JavaScript Templates
Socket.IO

$ npm install express
$ npm install ejs
$ npm install socket.io

簡単。


で、アプリを書く。サーバーのapp.jsを

var express = require('express');
var app = express.createServer();
var ejs = require('ejs');
var io  = require('socket.io');

var port = 3000;
app.configure(function(){
    app.use(express.staticProvider(__dirname + '/static'));
});
app.set('view engine', 'ejs');
app.set('view options', { layout: false });

app.get('/', function(req, res) {
    console.log('/');
    res.render('index', { locals: { port: port } });
});
app.listen(port);

var socket = io.listen(app);
socket.on('connection', function(client) {
    client.on('message', function(msg) {
        client.send(msg);
        client.broadcast(msg);
    });
    client.on('disconnect', function() {
        console.log('disconnect');
    });
});

console.log('Server running at http://127.0.0.1:' + port + '/');

"views/index.ejs"ã‚’

<html>
  <head>
    <title>hoge</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.4.4");</script>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">var port = <%= port %>;</script>
    <script type="text/javascript" src="/js/client.js"></script>
    <link href="/css/style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <form action="" id="form">
      <input type="text" name="message" id="message" />
      <input type="submit" />
    </form>
    <hr />
    <dl id="list"></dl>
  </body>
</html>

クライアント側のjsを"static/js/client.js"として

$(function() {
    var socket = new io.Socket(null, { port: port });
    socket.connect();
    socket.on('connect', function() {
        console.log('connect');
    });
    socket.on('message', function(msg) {
        var date = new Date();
        $('#list').prepend($('<dt>' + date + '</dt><dd>' + msg + '</dd>'));
    });
    socket.on('disconnect', function(){
        console.log('disconnect');
    });

    $('#form').submit(function() {
        var message = $('#message');
        socket.send(message.val());
        message.attr('value', '');
        return false;
    });
});

と書いた。
で、あとは

$ node app.js

とやるだけ。root権限じゃないと"flash XML policy file"云々、とsocket.ioから警告が出るけど、WebSocket使ってれば関係ないかな。

submitすると瞬時に他クライアント側にも反映される。ステキ。

感想

結構簡単に分かりやすく書けて、思ってた以上にとっつきやすかった、node.js。

"http.createServer"だけで処理を書いていくと面倒そうなので、これくらいのWAFがあるとちょっとしたもの作るのに便利な気がする。イイカンジ。

  • テンプレートエンジン"ejs"

ExpressでサポートしてるテンプレートエンジンでJadeだとかHaml.jsだとかあったけど、パッと見たカンジ とても使ってみる気にはなれなかったので、一番簡単そうなejsを選択した。パフォーマンスとか細かい使い方はまだ分からないけど一番馴染みやすくてお手軽だと思う。

  • socket.io

ブラウザサポートだとか意識することなくサーバー側もクライアント側も同じように記述できるのは確かに便利。リアルタイム系はとりあえずコレ使っておけば良し、というカンジかなー

参考

ExpressとSocket.ioを使ったチャットサンプル - 自分の感受性くらい