Node.js + Socket.IOでチャットシステム (第5回)

Tatsuya Yatagawa

2015-01-01

Web

こんにちはtatsyです。Node.js + Socket.IOの最終回です。

今回は小さな変更ではありますが、前回までで作成したチャットシステムにタイピング中かどうかを表示する機能を追加してみたいと思います。

タイピングの検知

これはNode.jsやSocket.IOではなく、JavaScriptの問題ですが、input上でユーザがタイピングをしているかどうかを検知する機能を最初に盛り込みます。

ここでは最も単純なやり方でkeyupイベントでタイピングを検知します。

public/js/chat.js

var isType = false;

$('#m').keyup(function() {
    if($('#m').val() == '') {
        isType = false;
        socket.emit('cancel typing', {});
    } else if(!isType) {
        isType = true;
        socket.emit('start typing', {});
    }
});

このコードでは、メッセージを入力しているinput#mのkeyupを検出して、タイピング中かどうかを記録しておくフラグisTypeを変更しています。

keyupの度にemitを呼び出すのはちょっとカッコ悪いのでフラグが変更されるときだけemitを行います。

ここでemitしているイベントはcancel typingとstart typingの2種類です。

タイピングイベントのサーバーでの処理

続いては上記のコードでクライアント側からemitされたイベントをサーバー側で処理します。

コードの書き換えはそれほど多くないです。socket.on(‘user login’)に対して次のコードを追加します。

index.js

socket.on('start typing', function(user) {
    io.emit('chat message', user + ' is typing');
});

socket.on('cancel typing', function(user) {
       io.emit('cancel typing', user + ' is typing');
});

この処理を書き加えることにより、特定のクライアントで発生したタイピングイベントを検知して、現在つながっているクライアントに通知することができます。

タイピングイベントのクライアントでの処理

最後にサーバーから通知されたタイピングイベントを処理して、メッセージ一覧にユーザのタイピング状態を表示します。

タイピングを開始したときにはchat messageイベントを処理するだけなので、以下で書き加えるのはcancel typingの処理だけです。

public/js/chat.js

socket.on('cancel typing', function(msg) {
    $('#messages > li').each(function() {
        if($(this).text() == msg) {
            $(this).remove();
            return;
        }
    });
});