Commit: 51274ace76f331f34e729b043f5ebeaaea4a2ccd - node_sample_minichat (git)

Node.js sample application with Socket.IO

Commit MetaInfo

• Revision: 51274ace76f331f34e729b043f5ebeaaea4a2ccd (tree)
• Time: 2012-10-29 01:06:50
• Author: hylom <hylom@hylo...>
• Commiter: hylom

Log Message

implement all features

Change Summary

• modified: app.js
• modified: public/js/room.js
• modified: routes/index.js
• modified: views/index.jade
• modified: views/room.jade

Incremental Difference

--- a/app.js
+++ b/app.js
@@ -10,6 +10,7 @@ var express = require('express')
   , socketIO = require('socket.io');
 
 var app = express();
+var crypto = require('crypto');
 
 app.configure(function(){
   app.set('port', process.env.PORT || 3000);
@@ -29,10 +30,9 @@ app.configure('development', function(){
 
 app.get('/', routes.index);
 app.post('/room', routes.room);
-app.get('/echo/:name', routes.echo);
 
 var server = http.createServer(app);
-var io = socketIO.listen(server);
+var io = socketIO.listen(server, {log:false});
 
 server.listen(app.get('port'), function(){
   console.log("Express server listening on port " + app.get('port'));
@@ -41,32 +41,148 @@ server.listen(app.get('port'), function(){
 // socket.ioのソケットを管理するオブジェクト
 var socketsOf = {};
 
+// 指定したroomIdに属するクライアントすべてに対しイベントを送信する
+function emitToRoom(roomId, event, data, fn) {
+  if (socketsOf[roomId] === undefined) {
+    return;
+  }
+  var sockets = socketsOf[roomId];
+  Object.keys(sockets).forEach(function (key) {
+    sockets[key].emit(event, data, fn);
+  });
+};
+
 // socket.ioのコネクション設定
 io.sockets.on('connection', function (socket) {
+
   // コネクションが確立されたら'connected'メッセージを送信する
   socket.emit('connected', {});
 
-  // クライアントは'connected'メッセージを受信したら、
-  // クライアントの情報とともに'regist request'メッセージを送信する
-  socket.on('regist request', function (client) {
-    console.log('regist client');
-    if (socketsOf[client.roomId] === undefined) {
+  // 認証情報を確認する
+  socket.on('hash password', function (password, fn) {
+    var hashedPassword = '';
+    var shasum = crypto.createHash('sha512');
+
+    if (password !== '') {
+      shasum.update('initialhash');
+      shasum.update(password);
+      hashedPassword = shasum.digest('hex');
+    }
+    fn(hashedPassword);
+  });
+
+  // 認証情報を確認する
+  socket.on('check credential', function (client) {
+    // クライアントはconnectedメッセージを受信したら、minichatオブジェクトを
+    // 引数にこのメッセージを送信する
+
+    // 認証情報の確認
+    if (client.mode == 'create') {
+      // modeが'create'の場合、すでに対応するroomIdのチャットルームがないか
+      // チェックする
+      if (socketsOf[client.roomId] !== undefined) {
+        socket.emit('room exists', {});
+        return;
+      }
       socketsOf[client.roomId] = {};
     }
-    socketsOf[client.roomId][client.userName] = socket;
+
+    if (client.mode == 'enter') {
+      // 対応するroomIdのチャットルームの存在をチェックする
+      if (socketsOf[client.roomId] === undefined) {
+        socket.emit('invalid credential', {});
+        return;
+      }
+      // ユーザー名がかぶっていないかチェックする
+      if (socketsOf[client.roomId][client.userName] !== undefined) {
+        socket.emit('userName exists', {});
+        return;
+      }
+    }
+
+    // ソケットにクライアントの情報をセットする
+    socket.set('client', client, function () {
+      socketsOf[client.roomId][client.userName] = socket;
+      if (client.userName) {
+        console.log('user ' + client.userName + '@' + client.roomId + ' connected');
+      }
+    });
+
+    // 認証成功
+    socket.emit('credential ok', {});
+
+    // 既存クライアントにメンバーの変更を通知する
+    var members = Object.keys(socketsOf[client.roomId]);
+    emitToRoom(client.roomId, 'update members', members);
+
+    var shasum = crypto.createHash('sha1')
+    var message = {
+        from: 'システムメッセージ',
+        body: client.userName + 'さんが入室しました',
+        roomId: client.roomId
+    }
+    message.date = _formatDate(new Date());
+    shasum.update('-' + message.roomId);
+    message.id = (new Date()).getTime() + '-' + shasum.digest('hex');
+    emitToRoom(message.roomId, 'push message', message);
+
+  });
+
+  // ソケットが切断された場合、ソケット一覧からソケットを削除する
+  socket.on('disconnect', function () {
+    socket.get('client', function (err, client) {
+      if (err || !client) {
+        return;
+      }
+      var sockets = socketsOf[client.roomId];
+      if(sockets !== undefined) {
+        delete sockets[client.userName];
+      }
+      console.log('user ' + client.userName + '@' + client.roomId + ' disconnected');
+      var members = Object.keys(sockets);
+      if (members.length === 0) {
+        delete socketsOf[client.roomId];
+      } else {
+        // 既存クライアントにメンバーの変更を通知する
+        emitToRoom(client.roomId, 'update members', members);
+        var message = {
+          from: 'システムメッセージ',
+          body: client.userName + 'さんが退室しました',
+          roomId: client.roomId
+        }
+        var shasum = crypto.createHash('sha1')
+        message.date = _formatDate(new Date());
+        shasum.update('-' + message.roomId);
+        message.id = (new Date()).getTime() + '-' + shasum.digest('hex');
+        emitToRoom(message.roomId, 'push message', message);
+
+      }
+    });
   });
 
   // クライアントは'say'メッセージとともにチャットメッセージを送信する
-  socket.on('say', function (message) {
+  socket.on('say', function (message, fn) {
     console.log('receive message');
-    socket.emit('say accept', {});
+
+    var shasum = crypto.createHash('sha1')
     message.date = _formatDate(new Date());
-    if (socketsOf[message.roomId] !== undefined) {
-      var sockets = socketsOf[message.roomId];
-      Object.keys(sockets).forEach(function (key) {
-        sockets[key].emit('push message', message);
+    shasum.update(message.userName + '-' + message.roomId);
+    message.id = (new Date()).getTime() + '-' + shasum.digest('hex');
+    emitToRoom(message.roomId, 'push message', message);
+    // クライアント側のコールバックを実行する
+    fn();
+  });
+
+  // クライアントはログが必要な場合'request log'メッセージを送信する
+  socket.on('request log', function (data) {
+    socket.get('client', function (err, client) {
+      if (err || client === undefined) {
+        return;
+      }
+      emitToRoom(client.roomId, 'request log', {}, function (log) {
+        socket.emit('update log', log);
       });
-    }
+    });
   });
 
 });

--- a/public/js/room.js
+++ b/public/js/room.js
@@ -2,6 +2,7 @@
 
 (function () {
   var socket;
+  var messageLogs = {};
 
   // ページロード時の処理
   $(document).ready(function () {
@@ -11,36 +12,108 @@
     // メッセージハンドラの定義
     // サーバーへの接続完了
     socket.on('connected', function(data) {
-      socket.emit('regist request', minichat);
+      socket.emit('check credential', minichat);
     });
 
-    // チャットメッセージ受信
-    socket.on('push message', function (message) {
-      var html = '<div class="message">'
-        + '<p class="postdate pull-right">' + message.date + '</p>'
-        + '<p class="author">' + message.from + '：</p>'
-        + '<p class="comment">' + message.body + '</p>'
-        + '</div>';
-      $('#messages').prepend(html);
+    // 認証成功
+    socket.on('credential ok', function(data) {
+      socket.emit('request log', {});
+    });
+
+    // 認証失敗：ルーム名/パスワードの不一致
+    socket.on('invalid credential', function(data) {
+      authRetry('ルーム名/パスワードが不正です');
+    });
+
+    // 認証失敗：同名のルームがすでに存在
+    socket.on('room exists', function(data) {
+      authRetry('同名のルームがすでに存在します');
     });
 
-    // チャットメッセージの送信完了
-    socket.on('say accept', function (data) {
-      $('#message').val('');
+    // 認証失敗：ルームに同名のユーザーが存在
+    socket.on('userName exists', function(data) {
+      authRetry('その名前はすでに使われています');
     });
 
-    // メッセージの送信ボタンを有効化
+    // チャットログの送信
+    socket.on('request log', function(data, callback) {
+      callback(messageLogs);
+    });
+
+    // チャットログの更新
+    socket.on('update log', function(log) {
+      Object.keys(log).forEach(function (key) {
+        messageLogs[key] = log[key];
+      });
+      updateMessage();
+    });
+
+    // チャットルームへのメンバー追加
+    socket.on('update members', function (members) {
+      $('#members').empty();
+      for (var i = 0; i < members.length; i++) {
+        var html = '<li>' + members[i] + '</li>';
+        $('#members').append(html);
+      }
+    });
+
+    // チャットメッセージ受信
+    socket.on('push message', function (message) {
+      messageLogs[message.id] = message;
+      prependMessage(message);
+    });
+
+    // チャットメッセージ送信
     $('#post-message').on('click', function () {
       var message = {
         from: minichat.userName,
         body: $('#message').val(),
         roomId: minichat.roomId
       };
-      socket.emit('say', message);
+      socket.emit('say', message, function () {
+        // メッセージの送信に成功したらテキストボックスをクリアする
+        $('#message').val('');
+      });
+    });
+
+    $('#credential-dialog-form').on('submit', function() {
+      $('#credentialDialog').modal('hide');
+      socket.emit('hash password', $('#new-password').val(), function (hashedPassword) {
+        minichat.roomName = $('#new-room').val();
+        minichat.userName = $('#new-name').val();
+        minichat.password = hashedPassword;
+        minichat.roomId = minichat.roomName + minichat.password;
+        socket.emit('check credential', minichat);
+      });
+      return false;
     });
 
   }); // document.ready()ここまで
 
+  function authRetry(message) {
+    $('#credential-dialog-header').text(message);    
+    $('#new-room').val(minichat.roomName);
+    $('#new-name').val(minichat.userName);
+    $('#credentialDialog').modal('show');
+  }
+
+  function prependMessage(message) {
+    var html = '<div class="message" id="' + message.id + '">'
+      + '<p class="postdate pull-right">' + message.date + '</p>'
+      + '<p class="author">' + message.from + '：</p>'
+      + '<p class="comment">' + message.body + '</p>'
+      + '</div>';
+    $('#messages').prepend(html);
+  }
+
+  function updateMessage() {
+    $('#messages').empty();
+    var keys = Object.keys(messageLogs);
+    keys.sort();
+    keys.forEach(function (key) {
+      prependMessage(messageLogs[key]);
+    });
+  }
 
 }).apply(this);
 

--- a/routes/index.js
+++ b/routes/index.js
@@ -8,37 +8,22 @@ exports.index = function(req, res){
   res.render('index', { title: 'minichat' });
 };
 
-exports.echo = function(req, res) {
-  var roomName = req.params.name;
-  var yourName = 'test';
-  var password = 'minichattest';
-  var hashedPassword = '';
-  var shasum = crypto.createHash('sha512');
-
-  if (password !== '') {
-    shasum.update(password);
-    hashedPassword = shasum.digest('hex');
-  }
-
-  var params = {
-    title: 'チャットルーム：' + roomName,
-    room: {
-      name: roomName,
-      password: hashedPassword
-    },
-    user: {name: yourName}
-  };
-  res.render('room', params);
-};
-
 exports.room = function(req, res){
   var roomName = req.body.roomName || '';
   var yourName = req.body.yourName || '';
   var password = req.body.password || '';
+  var mode = req.body.mode;
+
+  if (mode === undefined) {
+    res.send(500);
+    return;
+  };
+
   var hashedPassword = '';
   var shasum = crypto.createHash('sha512');
 
   if (password !== '') {
+    shasum.update('initialhash');
     shasum.update(password);
     hashedPassword = shasum.digest('hex');
   }
@@ -49,7 +34,8 @@ exports.room = function(req, res){
       name: roomName,
       password: hashedPassword
     },
-    user: {name: yourName}
+    user: {name: yourName},
+    mode: mode
   };
   res.render('room', params);
 };

--- a/views/index.jade
+++ b/views/index.jade
@@ -24,12 +24,12 @@ block content
             .controls
               label
                 input#new-password(type='password', name='password', placeholder='パスワードを入力...')
-              button#create(type='submit', class='btn', name='create') チャットルームを作成
+              button.btn(type='submit', name='mode', value='create') チャットルームを作成
 
       .span6
         h2 Enter:
         p 既存のチャットルームに入る
-        form#enter.form-horizontal(action='/enter/', method='post')
+        form#enter.form-horizontal(action='/room/', method='post')
           .control-group
             label.control-label(for='enter-room') ルーム名
             .controls
@@ -43,7 +43,7 @@ block content
             .controls
               label
                 input#enter-password(type='password', name='password', placeholder='パスワードを入力...')
-              button(type='submit', name='enter', class='btn') チャットルームへ入る
+              button.btn(type='submit', name='mode', value='enter') チャットルームへ入る
 
   hr
   footer

--- a/views/room.jade
+++ b/views/room.jade
@@ -6,7 +6,8 @@ block content
       roomName: '#{room.name}',
       password: '#{room.password}',
       userName: '#{user.name}',
-      roomId: '#{room.name}#{room.password}'
+      roomId: '#{room.name}#{room.password}',
+      mode: '#{mode}'
     };
 
   .navbar.navbar-inverse.navbar-fixed-top
@@ -18,7 +19,7 @@ block content
             a ルーム名：#{room.name}
           li
             a(href='/') 退出する
-  .container
+  #main-contents.container
     .row
       .span4
         h3
@@ -30,14 +31,35 @@ block content
         #members-box
           h5 チャットメンバー：
           ul#members
-            li #{user.name}
       .span8
         #messages.well
-          .message
-            p.postdate.pull-right 10/23 12:34
-            p.author システムメッセージ：
-            p.comment チャットルーム「hogehoge」が作成されました。HASH: #{room.password}
 
+  // 入室時の確認ダイアログ
+  // パスワードが不正
+  #credentialDialog.modal.hide(data-backdrop='static', keyboard='false')
+    .modal-header
+      h3#credential-dialog-header 入室エラー
+    .modal-body
+      p#credential-dialog-message ルーム情報や名前を再入力してください：
+      form#credential-dialog-form.form-horizontal
+        .control-group
+          label.control-label(for='new-room-name') ルーム名
+          .controls
+            input#new-room(type='text', name='roomName', placeholder='ルーム名を入力...')
+        .control-group
+          label.control-label(for='new-name') 表示するあなたの名前
+          .controls
+            input#new-name(type='text', name='yourName', placeholder='表示名を入力...')
+        .control-group
+          label.control-label(for='new-password') 認証用パスワード
+          .controls
+            label
+              input#new-password(type='password', name='password', placeholder='パスワードを入力...')
+            button.btn.btn-primary(type='submit') 再試行
+
+    .modal-footer
+      a(href='/') トップページへ戻る
+    
 
   hr
   footer