chapter 02 done

Author: island205

how-to-build-chat-app-with-socket.io-and-angular/02-让用户不再匿名.md

@@ -477,13 +477,13 @@ angular.module('techNodeApp').controller('MessageCreatorCtrl', function($scope,
 })
 ```
 
-我想通过socket发送的消息不再是一个字符串，而是一个携带消息内容，和消息发送者信息的json对象；
+通过socket发送的消息不再是一个字符串，而是一个携带消息内容，和消息发送者信息的json对象；
 
 重启服务器，登录发条消息，终于，TechNode的用户不再是匿名的了！
 
 #### 显示在线用户
 
-如果能够看到哪些用户同时在线就好了，让我们开始实现这个功能吧！
+如果能够看到哪些用户在聊天室里就好了，让我们实现这个功能吧！
 
 我们将用户是否在线的状态存储在数据库中，因此需要扩展User Schema的字段：
 
@@ -499,7 +499,7 @@ var User = new Schema({
 在用户登录或者登出是修改用户的在线状态：
 
 ```
-app.post('/ajax/login', function(req, res) {
+app.post('/api/login', function(req, res) {
   email = req.body.email
   if (email) {
     Controllers.User.findByEmailOrCreate(email, function(err, user) {
@@ -525,7 +525,7 @@ app.post('/ajax/login', function(req, res) {
   }
 })
 
-app.get('/ajax/logout', function(req, res) {
+app.get('/api/logout', function(req, res) {
   _userId = req.session._userId
   Controllers.User.offline(_userId, function (err, user) {
     if (err) {
@@ -539,7 +539,7 @@ app.get('/ajax/logout', function(req, res) {
   })
 })
 ```
-修改了login和logout这两个接口，在用户登录或者退出时更新用户的状态，online和offline这两个方法就比较容易：
+修改了login和logout这两个接口，在用户登录或者退出时更新用户的状态，online和offline这两个方法就比较简单了，修改controllers/user.js，添加下面两个接口：
 
 ```
 exports.online = function(_userId, callback) {
@@ -564,42 +564,42 @@ exports.offline = function(_userId, callback) {
 
 既然用户是否在线的状态已经存在数据库中了，那接下来将其读出来显示在聊天室的右侧就行啦！
 
-首先修改room controller，不但从服务端读取messages，同时还要读取在线的用户列表：
+首先修改房间列表的控制器RoomCtrl，从服务端读取的数据不但包括消息还有在线用户列表：
 
 ```
 angular.module('techNodeApp').controller('RoomCtrl', function($scope, socket) {
-  socket.on('technode.read', function (technode) {
-    $scope.technode = technode
+  socket.on('roomData', function (room) {
+    $scope.room = room
   })
-  socket.on('messages.add', function (message) {
+  socket.on('messageAdded', function (message) {
     $scope.technode.messages.push(message)
   })
-  socket.emit('technode.read')
+  socket.emit('getRoom')
 })
 ```
 
-我们把messages和users都放到technode这个对象中，修改socket服务端，将在线用户列表和messages一起读出来发送给客户端：
+我们把messages和users都放到room这个对象中，修改socket服务端，将在线用户列表和消息列表一道读出来发送给客户端：
 
 
 ```
 io.sockets.on('connection', function(socket) {
-  socket.on('technode.read', function() {
+  socket.on('getRoom', function() {
     Controllers.User.getOnlineUsers(function (err, users) {
       if (err) {
         socket.emit('err', {msg: err})
       } else {
-        socket.emit('technode.read', {users: users, messages: messages})
+        socket.emit('roomData', {users: users, messages: messages})
       }
     })
   })
-  socket.on('messages.create', function(message) {
+  socket.on('createMessage', function(message) {
     messages.push(message)
-    io.sockets.emit('messages.add', message)
+    io.sockets.emit('messageAdded', message)
   })
 })
 ```
 
-getOnlineUsers非常简单：
+别忘了在controllers/user.js中添加getOnlineUsers接口：
 
 ```
 exports.getOnlineUsers = function(callback) {
@@ -609,15 +609,15 @@ exports.getOnlineUsers = function(callback) {
 }
 ```
 
-接下来就是把在线用户列表在客户端render出来了，其实只需要修改room的模板即可：
+接下来就是把在线用户列表在客户端render出来了，其实只需要修改房间视图room.html即可：
 
 ```
 <div class="col-md-9">
   <div class="panel panel-default room">
     <div class="panel-heading room-header">TechNode</div>
     <div class="panel-body room-content">
       <div class="list-group messages" auto-scroll-to-bottom>
-        <div class="list-group-item message" ng-repeat="message in technode.messages">
+        <div class="list-group-item message" ng-repeat="message in room.messages">
           <img src="{{message.creator.avatarUrl}}" title="{{message.creator.name}}" class="img-rounded"/>{{message.creator.name}}: {{message.message}}
         </div>
       </div>
@@ -634,7 +634,7 @@ exports.getOnlineUsers = function(callback) {
     <div class="panel-heading user-list-header">在线用户</div>
     <div class="panel-body user-list-content">
       <div class="list-group users">
-        <div class="list-group-item user" ng-repeat="user in technode.users">
+        <div class="list-group-item user" ng-repeat="user in room.users">
           <img src="{{user.avatarUrl}}" title="{{user.name}}" class="img-rounded"/>{{user.name}}
         </div>
       </div>
@@ -643,9 +643,9 @@ exports.getOnlineUsers = function(callback) {
 </div>
 ```
 
-并么有什么复杂的地方，就如消息列表一样渲染就行。
+没有特别的地方，如消息列表一样渲染即可。
 
-TechNode是基于socket的，用户上下线的概念并不仅限于登录和登出，用户通过socket脸上就是上线，用户socket断开就是离线了。我们来看看如何实现基于socket的用户上下线。
+TechNode是基于socket的，用户上下线的概念并不仅限于登录和登出，用户通过socket连上就是上线，用户socket断开就是离线了。我们来看看如何实现基于socket的用户上下线。
 
 ```
 io.sockets.on('connection', function(socket) {
@@ -656,7 +656,7 @@ io.sockets.on('connection', function(socket) {
         mesg: err
       })
     } else {
-      socket.broadcast.emit('users.add', user)
+      socket.broadcast.emit('online', user)
     }
   })
   socket.on('disconnect', function() {
@@ -666,32 +666,32 @@ io.sockets.on('connection', function(socket) {
           mesg: err
         })
       } else {
-        socket.broadcast.emit('users.remove', user)
+        socket.broadcast.emit('offline', user)
       }
     })
   });
   // ...
 })
 ```
-我们添加了socket连上和断开的处理，通知客户端有用户连上或者下线了。客户端只需监听这两个事件即可：
+我们添加了socket连上和断开的处理，通知客户端有用户连上或者下线了。客户端只需监听这两个事件即可，在房间控制器RoomCtrl添加对这两个事件的处理：
 
 ```
-socket.on('users.add', function (user) {
-  $scope.technode.users.push(user)
+socket.on('online', function (user) {
+  $scope.room.users.push(user)
 })
-socket.on('users.remove', function (user) {
+socket.on('offline', function (user) {
   _userId = user._id
-  $scope.technode.users = $scope.technode.users.filter(function (user) {
+  $scope.room.users = $scope.room.users.filter(function (user) {
     return user._id != _userId
   })
 })
 ```
 
 至此，本章最核心的部分已经完成，现在你可以在聊天室的右侧查看在线的用户的了。
 
-#### 消息持久化、系统消息
+#### 消息持久化和系统消息
 
-到目前为止，聊天室的消息并没有存放在数据库中，而且消息没有创建时间等等一些参数，现在我们就来处理这些问题；首先创建一个消息的Scheme：
+到目前为止，聊天室的消息并没有存放在数据库中，而且消息没有创建时间等等，现在我们就来处理这些问题。首先创建一个消息的Schema，在models中添加message.js，添加如下代码：
 
 ```
 var mongoose = require('mongoose')
@@ -713,16 +713,16 @@ var Message = new Schema({
 module.exports = Message
 ```
 
-在消息中，我们存放了消息的内容和创建时间，甚至还将消息创建人的详细信息也包含在了消息里，这样做的好处是，浪费一点空间，缩短查询时的时间；其次，消息中的creator数据并不需要保持绝对的正确。
+在消息中，我们存放了消息的内容和创建时间，还将消息创建人的详细信息也包含在了消息里，这样做的好处是，浪费一点空间，缩短查询时的时间；因为消息中的creator数据并不需要保持绝对的一致性。
 
-根据Scheme生成Message模型类：
+在models/index.js中，根据Schema生成Message模型：
 
 ```
 // ...
 exports.Message = mongoose.model('Message', require('./message'))
 ```
 
-添加一个消息的controller，实现消息的写入和查询：
+在服务端添加一个消息的控制器'controllers/message.js'，实现消息的写入和查询：
 
 ```
 var db = require('../models')
@@ -743,12 +743,13 @@ exports.read = function(callback) {
   }, callback)
 }
 ```
+
 查询时，我们按照消息的创建的时间倒叙排列，而且取最新的20条；
 
 接下来，我们修改与客户端通信的API部分：
 
 ```
-socket.on('technode.read', function() {
+socket.on('getRoom', function() {
   async.parallel([
     function(done) {
       Controllers.User.getOnlineUsers(done)
@@ -763,58 +764,59 @@ socket.on('technode.read', function() {
         msg: err
       })
     } else {
-      socket.emit('technode.read', {
+      socket.emit('roomData', {
         users: results[0],
         messages: results[1]
       })
     }
   });
 })
-socket.on('messages.create', function(message) {
+socket.on('createMessage', function(message) {
   Controllers.Message.create(function (err, message) {
     if (err) {
       socket.emit('err', {msg: err})
     } else {
-      io.sockets.emit('messages.add', message)
+      io.sockets.emit('messageAdded', message)
     }
   })
 })
 ```
 
-在这里我们使用async来进行数据库并行的读取，别忘记了使用npm安装async包。
+在这里我们使用async来并行地对数据库进行读取，别忘记了使用npm安装async包。
 
-前端作少许修改，显示消息发出的时间：
+简单修改客户端的房间视图，显示消息发出的时间：
 
 ```
 <div class="list-group-item message" ng-repeat="message in technode.messages">
   <img src="{{message.creator.avatarUrl}}" title="{{message.creator.name}}" class="img-rounded"/>{{message.creator.name}}: {{message.content}}<time am-time-ago="message.createAt"></time>
 </div>
 ```
 
-在这里我们使用了一个名为am-time-ago的directive，这个directive可以动态地更新time中的时间显示，开始可能是`几秒前`，随着实现的推移，能够智能地便成`1分钟前`等等；使用angular-moment提供的，请使用`bower install angular-moment --save`安装这个模块，并在index.html进行引用：
+在这里我们使用了一个名为am-time-ago的Angular指令，这个指令可以动态地更新time标记中的时间显示，开始可能是`几秒前`，随着时间的推移，能够智能地便成`1分钟前`、`1小时前`等等；这个指令是angular-moment这个模块提供的，请使用`bower install angular-moment --save`安装这个模块，并在将其加入到index.html中：
 
 ```
 <script type="text/javascript" src="/components/moment/moment.js"></script>
 <script type="text/javascript" src="/components/angular-moment/angular-moment.js"></script>
 <script type="text/javascript" src="components/moment/lang/zh-cn.js"></script>
 ```
 
-我们添加了一个语言包，需要在technode.js对angular-moment和语言包进行配置：
+我们不但加入了angular-moment.js，还添加了一个中文语言包。需要在technode.js中添加对angular-moment.js的依赖，并将语言设置为中文：
 
 ```
 angular.module('techNodeApp', ['ngRoute', 'angularMoment']).
 run(function ($window) {
   $window.moment.lang('zh-cn')
+  // ...
 })
 ```
 
-至此，我们将message持久化了，而且保存了消息的创建时间，并在前端将时间显示出来。
+至此，我们将消息保存进了数据库，还保存了消息的创建时间，并在客户端将时间显示出来，我们将消息持久化的任务完成了。
 
-#### 提供一些系统消息
+#### 系统消息
 
 我们为用户提供了一些系统的消息，比如其他用户登录退出的信息等等；这部分消息都是临时的，因此我们不会把它们加入到数据库中，动态生成即可。
 
-比如我们添加两个用户登录和登出的消息：
+比如我们添加有用户登录和登出的消息：
 
 ```
 io.sockets.on('connection', function(socket) {
@@ -825,8 +827,8 @@ io.sockets.on('connection', function(socket) {
         mesg: err
       })
     } else {
-      socket.broadcast.emit('users.add', user)
-      socket.broadcast.emit('messages.add', {
+      socket.broadcast.emit('online', user)
+      socket.broadcast.emit('messageAdded', {
         content: user.name + '进入了聊天室',
         creator: SYSTEM,
         createAt: new Date()
@@ -840,8 +842,8 @@ io.sockets.on('connection', function(socket) {
           mesg: err
         })
       } else {
-        socket.broadcast.emit('users.remove', user)
-        socket.broadcast.emit('messages.add', {
+        socket.broadcast.emit('offline', user)
+        socket.broadcast.emit('messageAdded', {
           content: user.name + '离开了聊天室',
           creator: SYSTEM,
           createAt: new Date()