Node.jsにてsocket.ioのjoinでチャットルーム実装!

JavaScript Advent Calendar 2011(Node.js/WebSocketsコース) 22日目です!
急遽参戦!そして初Advent Calendar...


Node.jsでのチャットルームの実装にsocket.ioのjoin()を使ってみます。

はじめに

socket.ioを利用したチャット機能の実装については
サンプルも多く結構簡単に実装が可能です。

ですが、チャットルームの実装方法については情報が少なく
やり方がわからなかったので色々調べつつ
RoomList, Room, User クラスを自作することで対応を行いました。

※sample
https://github.com/hekyou/socket_io-not-join-sample

ですが、、

最近socket.ioにjoinメソッドがあることを知りまして。

これなら簡潔に書けるじゃん...

と、思ったので試してみました。

環境

Mac OS X Snow Leopard 10.6.8 (Lionっておいしいの?)
Node.js 0.4.12 (0.6にしないと!)
socket.io 0.8.5

利用するメソッド

join(room)

roomに指定した部屋に参加することができる。

to(room).emit

roomに指定した部屋にのみメッセージを送れる。

実装

サーバ側
var io = require('socket.io').listen(app);

chat = io.sockets.on('connection', function(client) {
    // ※2 クライアントに接続成功を送信
    client.emit('connected');

    client.on('init', function(req) {
        client.set('room', req.room);
        client.set('name', req.name);
        chat.to(req.room).emit('message', req.name + " さんが入室");
        // ※4 クライアントを部屋に入室させる
        client.join(req.room);
    });

    client.on('message', function(data) {
        var room, name;

        client.get('room', function(err, _room) {
            room = _room;
        });
        client.get('name', function(err, _name) {
            name = _name;
        });

        // ※6 受け取ったメッセージを部屋の皆に送信
        chat.to(room).emit('message', name + ": " + data);
    });

    // ※8 退室
    client.on('disconnect', function() {
        var room, name;

        client.get('room', function(err, _room) {
            room = _room;
        });
        client.get('name', function(err, _name) {
            name = _name;
        });
        client.leave(room);
        chat.to(room).emit('message', name + " さんが退出");
    });
});
クライアント側
// ※1 サーバに接続リクエスト
var socket = io.connect('/');

function chat(room, name) {
    socket.on('connected', function() {
        // ※3 入室する部屋番号を送信
        socket.json.emit('init', { 'room': room, 'name': name });
    });

    // ※7 受け取ったメッセージを表示
    socket.on('message', function(data) {
        if (data) {
            update(data);
        }
    });
}
function send(name) {
    var data = $('#comment').val();

    // ※5 メッセージを送信
    socket.json.send(data);

    $('#comment').val("");
}
function update(data) {
    var obj = $(document.createElement('div'));
    obj.html(data);
    $('#view').append(obj);
}

大分すっきりしました!!
もっと早く知っていれば...

ちなみに、※番号は一応処理の順番になっています。


今回この記事用に作成したものが下記になります。
https://github.com/hekyou/socket_io-join-sample

ちなみに独自クラスを使って作成したサービスが下記になります。
blockdiagをみんなで編集しよう的なものです。
http://live-diag.herokuapp.com/

※blockdiagについてはこちらを参照してください。便利ですヨ!
http://blockdiag.com/ja/blockdiag/

後でjoinで書き直そうっと...

備考

to(room).send は使えなくてちょっとだけハマりました。