improve chapter01

island205 · island205 · commit 15199bfd3bfa · 2014-02-08T12:19:57.000+08:00
diff --git a/how-to-build-chat-app-with-socket.io-and-angular/01-最简单的聊天室.md b/how-to-build-chat-app-with-socket.io-and-angular/01-最简单的聊天室.md
@@ -21,18 +21,18 @@ Angular.js是新一代前端MVC框架。与Backbone.js相比，它完全实现
 
 ### 开始
 
-新建`TechNode`目录，使用`npm init`初始化, 生成`package.json`文件：
+新建`TechNode`目录，我们所有的代码都会放在这个目录中。使用命令`npm init`初始化项目，生成`package.json`文件：
 
 ```
 $ mkdir TechNode && cd TechNode && npm init
 ```
 
-有了package.json文件，我们就可以轻松地管理项目的依赖。
+> Node.js使用package.json来作为模块的描述文件，与模块相关的信息，比如模块名、作者、依赖的模块信息都会放在这个文件当中。有了package.json文件，我们可以非常方便地使用`npm`来做依赖模块管理。
 
 
-### 使用express搭建服务器
+### express.js服务器
 
-想必你应该很清楚如何使用express搭建服务器了，下面是TechNode的服务器，文件名为app.js，直接放在TechNode下面：
+我们可以很轻松地使用express.js搭建一个Node.js服务器。在TechNode目录下新建app.js文件，添加如下代码：
 
 ```
 var express = require('express')
@@ -51,25 +51,20 @@ io.sockets.on('connection', function (socket) {
   socket.emit('connected')
 })
 
-console.log('TechNode  is on port ' + port + '!')
+console.log('TechNode is on port ' + port + '!')
 ```
 
-
-我们将静态文件放在`staitc`目录下，包括`index.html`，我们不使用`jade`来生成html页面，而是直接使用html文件。
+虽然这段代码非常简单，但是我需要指出其中的一些约定：
 
 ```
 app.use(express.static(__dirname + '/static'))
-```
 
-除了静态文件的请求意外，其他所有的HTTP请求，我们都转发到`index.html`，服务端不关心路由，所有的路由逻辑都交给客户端的Angular.js去处理。
-
-```
 app.use(function (req, res) {
   res.sendfile('./static/index.html')
 })
 ```
 
-接下来就是建立服务端与浏览器端的socket服务。socket.io的API是基于事件的，我们监听着`connected`事件，如果有客户端链接上来，我们就可以获得一个socket对象，这样我们就可以和这个客户端实时通信了。
+与通常的express.js项目一样，我们将静态文件放在`static`目录下；在`static`目录下还会放`index.html`文件，它将会作为整个应用的启动页面。除了静态文件的请求以外，其他所有的HTTP请求，我们都会输出`index.html`文件，服务端不关心路由，所有的路由逻辑都交给在浏览器端的Angular.js去处理。
 
 ```
 var io = require('socket.io').listen(app.listen(port))
@@ -79,11 +74,13 @@ io.sockets.on('connection', function (socket) {
 })
 ```
 
-新建`static`目录，添加`index.html`文件：
+下一步就是在服务端添加`socket`服务。`socket.io`提供的接口是基于事件的，服务器端监听`connected`事件，如果有客户端链接上来，就会产生一个socket对象，使用这个对象，我们就可以和对应的客户端实时通信了。
+
+在`TechNode`下新建`static`目录，添加`index.html`文件到`static`目录中：
 
 ```
 <!doctype html>
-<html lang="en">
+<html>
   <head>
     <meta charset="UTF-8">
     <title>TechNode</title>
@@ -100,7 +97,7 @@ io.sockets.on('connection', function (socket) {
 </html>
 ```
 
-为了与服务端的socket.io通信，我们必须在客户端引入socket.io提供的客户端代码`socket.io.js`。这个文件并不是我们手动添加到`static`目录的，socket.io自己响应了这个请求。当然，你可以将这个文件保存下来，从别的地方引用。
+为了与服务端的socket服务通信，我们必须在客户端引入`socket.io`提供的客户端类库`socket.io.js`。这个文件由`socket.io`提供服务，我们无需把这个文件添加到`static`目录中。
 
 ```
 var socket = io.connect('/')
@@ -109,59 +106,63 @@ socket.on('connected', function () {
 })
 ```
 
-调用`io.connect`，传入socket服务器，因为在本例中，socket服务器与静态服务器是同一个，可以简写为`/`（实际上相当于`http://localhost:3000`），获得一个socket对象，然后就可以和服务端通信了。
+调用`io`的`connect`方法，传入socket服务的地址，因为在本例中，socket服务器与静态服务器是同一个，可以简写为`/`（实际上相当于`http://localhost:3000`），然后我们就获得了一个socket对象，这样就可以和服务端通信了。
 
 
-别忘了使用`npm install express socket.io --save`安装`express`和`socket.io`，参数`--save`可以自动更新package.json文件，将express和socket.io的依赖加进去。
+别忘了使用`npm install express socket.io --save`安装`express`和`socket.io`，参数`--save`可以自动更新package.json`文件，将`express`和`socket.io`作为项目依赖添加到`package.json`中。
 
-服务器搭建好了，运行：
+到这里，最基础的服务端已经搭建完成了，运行：
 
 ```
 $ node app.js 
+
+TechNode is on port 3000!
 ```
 
-`TechNode is on port 3000!`，访问`http://localhost:3000`，试试看。
+访问`http://localhost:3000`，试试看。
 
 ### 最简单的聊天室
 
-#### 使用Bootstrap和Angular.js
+#### 安装Bootstrap和Angular.js
 
-我们使用`bower`来做前端类库的管理，首先新建`bower.json`文件，用来管理TechNode前端依赖的第三方库，运行`bower init`命令，回答一些问题，可以自动帮你生成bower.json文件。
+我们使用`bower`来管理TechNode使用到的前端类库，与`npm`类似，`bower`使用名为`bower.json`的文件来管理项目的依赖。在`TechNode`目录下运行`bower init`，生成`bower.json`文件。
 
-新建.bowerrc文件，添加如下内容，为bower指定包的安装目录：
+`bower`默认将依赖的模块安装在`bower_compoments`下，为了便于管理，新建`.bowerrc`文件，添加如下内容，为bower指定依赖的安装目录：
 
 ```
 {
   "directory" : "static/components"
 }
 ```
 
-接下来，试用`bower`安装我们需要的一些前端组件：
+接下来，试用`bower`安装我们需要的一些前端类库：
 
-- bootstrap：快速构建web项目的前端UI库，包含了jquery；
-- angular：我们的主角，前端MVC框架。
+- Bootstrap：快速构建web项目的前端UI库，依赖jQuery，`bower`在安装Bootstrap的同时，也会安装jQuery；
+- Angular.js：我们的主角，前端MVC框架。
 
 ```
 bower install bootstrap angular --save
 ```
 
-将这些类库引入到index.html中：
+> `--save`参数使得`bower`将依赖写入到`bower.json`中。
+
+将这些类库添加到`index.html`中：
 
 ```
 <head>
   <meta charset="UTF-8">
   <title>TechNode</title>
-  <link rel="stylesheet" href="/components/bootstrap/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="/components/bootstrap/dist/css/bootstrap.css">
   <script type="text/javascript" src="/socket.io/socket.io.js"></script>
   <script type="text/javascript" src="/components/jquery/jquery.js"></script>
-  <script type="text/javascript" src="/components/bootstrap/dist/js/bootstrap.min.js"></script>
+  <script type="text/javascript" src="/components/bootstrap/dist/js/bootstrap.js"></script>
   <script type="text/javascript" src="/components/angular/angular.js"></script>
 </head>
 ```
 
 #### 搭建聊天室
 
-使用html和angular将TechNode的外观搭建出来：
+首先，使用html将TechNode的外观搭建出来：
 
 ```
 <head>
@@ -198,36 +199,34 @@ bower install bootstrap angular --save
   ...
 ```
 
-新建styles文件夹，将房间的样式放到room.css文件中，最简单的TechNode聊天室就像下面这样：
+在`static`目录下新建`styles`目录，新建房间样式文件`room.css`，下面就是最简版的TechNode：
 
 ![TechNode](./examples/chapter01/images/simplest-technode.png)
 
 
-我们首先实现聊天室最简单的功能——发送消息和显示消息！
+接下来我们实现聊天室最基本的功能——消息！
 
-修改app.js中socket通信的部分：
+打开app.js文件，修改socket服务部分代码：
 
 ```
 // ...
 var messages = []
 
 io.sockets.on('connection', function (socket) {
-  socket.on('messages.read', function () {
-    socket.emit('messages.read', messages)
+  socket.on('getAllMessages', function () {
+    socket.emit('allMessages', 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)
   })
 })
 // ...
 ```
 
-我们是先使用messages这个内存对象来存放消息内容。
-用户连上来后，向服务器发送messages.read的请求，获取消息，我们将所有的消息返回给用户；
-当用户新建消息时，messages.create，我们把消息存放到messages中，并向所有的客户端广播有消息添加进来了。
+我们暂时把消息数据放到`messages`这个数组对象中。用户连上来后，向服务端发送`getAllMessages`请求，获取所有消息，服务器就把所有的消息通过`allMessages`事件推送给客户端；当用户创建消息时，向服务端发送`createMessage`事件，服务端把消息存放到`messages`数组中，并向所有的客户端广播`messageAdded`，有新的消息添加进来。
 
-下一步，开始使用angular来构建我们的聊天室吧。
+下一步，使用Angular.js构建聊天室的客户端。
 
 修改index.html，加上angular了的绑定，添加一个新的js文件technode.js到页面上：
 
