コミット: ca8b208fa2dac803bd0497a210e6633e6232e59b - node_sample_minichat (git)

Node.js sample application with Socket.IO

コミットメタ情報

• リビジョン: ca8b208fa2dac803bd0497a210e6633e6232e59b (tree)
• 日時: 2012-10-26 01:08:10
• 作者: hylom <hylom@hylo...>
• コミッター: hylom

ログメッセージ

fix say message

変更サマリ

• modified: app.js
• modified: public/css/style.css
• modified: public/js/room.js
• modified: views/room.jade

差分

--- a/app.js
+++ b/app.js
@@ -38,29 +38,50 @@ server.listen(app.get('port'), function(){
   console.log("Express server listening on port " + app.get('port'));
 });
 
+// socket.ioのソケットを管理するオブジェクト
 var socketsOf = {};
 
+// socket.ioのコネクション設定
 io.sockets.on('connection', function (socket) {
+  // コネクションが確立されたら'connected'メッセージを送信する
   socket.emit('connected', {});
-  socket.on('regist request', function (data) {
-    console.log('regist client for ' + data.roomId);
-    if (socketsOf[data.roomId] !== undefined) {
-      socketsOf[data.roomId].push(socket);
-    } else {
-      socketsOf[data.roomId] = [socket];
+
+  // クライアントは'connected'メッセージを受信したら、
+  // クライアントの情報とともに'regist request'メッセージを送信する
+  socket.on('regist request', function (client) {
+    console.log('regist client');
+    if (socketsOf[client.roomId] === undefined) {
+      socketsOf[client.roomId] = {};
     }
+    socketsOf[client.roomId][client.userName] = socket;
   });
 
-  socket.on('say', function (data) {
+  // クライアントは'say'メッセージとともにチャットメッセージを送信する
+  socket.on('say', function (message) {
     console.log('receive message');
     socket.emit('say accept', {});
-    if (socketsOf[data.roomId] !== undefined) {
-      var targets = socketsOf[data.roomId];
-      for (var i = 0; i < targets.length; i++) {
-        targets[i].emit('push message', data);
-      }
+    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);
+      });
     }
   });
 
 });
 
+function _formatDate(date) {
+  var mm = date.getMonth();
+  var dd = date.getDate();
+  var HH = date.getHours();
+  var MM = date.getMinutes();
+  if (HH < 10) {
+    HH = '0' + HH;
+  }
+  if (MM < 10) {
+    MM = '0' + MM;
+  }
+  return mm + '/' + dd + ' ' + HH + ':' + MM;
+};
+

--- a/public/css/style.css
+++ b/public/css/style.css
@@ -9,12 +9,13 @@ a {
 }
 
 #messages {
-  margin-top: 60px;
+  margin-top: 20px;
   background: white;
   border: 1px solid #bbb;
 }
 
 .message {
+  margin-top: 8px;
   border-bottom: 1px solid #ddd;
   line-height: 120%;
 }
@@ -30,3 +31,15 @@ a {
 .message .comment {
   word-wrap: break-word;
 }
+
+#members-box {
+  border-top: 1px solid #ddd;
+}
+
+#members-box ul {
+  margin: 0 0 0 10px;;
+}
+#members-box li {
+  font-size: 100%;
+  list-style: none;
+}

--- a/public/js/room.js
+++ b/public/js/room.js
@@ -1,6 +1,5 @@
 // room.js
 
-
 (function () {
   var socket;
 
@@ -8,26 +7,39 @@
   $(document).ready(function () {
     // ユーザー名、ルーム名、パスワードを送信
     socket = io.connect('http://localhost');
-    // ページロード時の処理ここまで
+
+    // メッセージハンドラの定義
+    // サーバーへの接続完了
     socket.on('connected', function(data) {
-      socket.emit('regist request', {roomId: minichat.roomId});
+      socket.emit('regist request', minichat);
     });
-    socket.on('push message', function (data) {
-      alert(data.message);
+
+    // チャットメッセージ受信
+    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('say accept', function (data) {
       $('#message').val('');
     });
-  });
 
-  $('#post-message').live('click', function () {
-    socket.emit('say', {
-      name: minichat.userName,
-      message: $('#message').val(),
-      roomId: minichat.roomId
+    // メッセージの送信ボタンを有効化
+    $('#post-message').on('click', function () {
+      var message = {
+        from: minichat.userName,
+        body: $('#message').val(),
+        roomId: minichat.roomId
+      };
+      socket.emit('say', message);
     });
-  });
 
+  }); // document.ready()ここまで
 
 
 }).apply(this);

--- a/views/room.jade
+++ b/views/room.jade
@@ -27,6 +27,10 @@ block content
           label
             textarea#message.span4(rows='5', placeholder='メッセージを入力...')
           button#post-message.btn.btn-primary(type='button') メッセージを投稿
+        #members-box
+          h5 チャットメンバー：
+          ul#members
+            li #{user.name}
       .span8
         #messages.well
           .message