Skip to content

Commit 979d0cb

Browse files
committed
fix issue
1 parent efe61f6 commit 979d0cb

File tree

1 file changed

+12
-46
lines changed

1 file changed

+12
-46
lines changed

how-to-build-chat-app-with-socket.io-and-angular/01-最简单的聊天室.md

+12-46
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ app.use(function (req, res) {
4747
4848
var io = require('socket.io').listen(app.listen(port))
4949
50-
io.sockets.on('connected', function (socket) {
50+
io.sockets.on('connection', function (socket) {
5151
socket.emit('connected')
5252
})
5353
@@ -59,25 +59,26 @@ console.log('TechNode is on port ' + port + '!')
5959

6060
```
6161
app.use(express.static(__dirname + '/static'))
62+
```
6263

64+
除了静态文件的请求意外,其他所有的HTTP请求,我们都转发到`index.html`,服务端不关心路由,所有的路由逻辑都交给客户端的Angular.js去处理。
65+
66+
```
6367
app.use(function (req, res) {
6468
res.sendfile('./static/index.html')
6569
})
6670
```
6771

68-
除了静态文件的请求意外,其他所有的HTTP请求,我们都转发到`index.html`,服务端不关心路由,所有的路由逻辑都交给客户端的Angular.js去处理
72+
接下来就是建立服务端与浏览器端的socket服务。socket.io的API是基于事件的,我们监听着`connected`事件,如果有客户端链接上来,我们就可以获得一个socket对象,这样我们就可以和这个客户端实时通信了
6973

7074
```
7175
var io = require('socket.io').listen(app.listen(port))
7276
73-
io.sockets.on('connected', function (socket) {
77+
io.sockets.on('connection', function (socket) {
7478
socket.emit('connected')
7579
})
7680
```
7781

78-
接下来就是建立服务端与浏览器端的socket服务。socket.io的API是基于事件的,我们监听着`connected`事件,如果有客户端链接上来,我们就可以获得一个socket对象,这样我们就可以和这个客户端实时通信了。
79-
80-
8182
新建`static`目录,添加`index.html`文件:
8283

8384
```
@@ -108,7 +109,7 @@ socket.on('connected', function () {
108109
})
109110
```
110111

111-
调用`io.connect`,传入socket服务器,获得一个socket对象,然后就可以和服务端通信了。
112+
调用`io.connect`,传入socket服务器,因为在本例中,socket服务器与静态服务器是同一个,可以简写为`/`(实际上相当于`http://localhost:3000`),获得一个socket对象,然后就可以和服务端通信了。
112113

113114

114115
别忘了使用`npm install express socket.io --save`安装`express``socket.io`,参数`--save`可以自动更新package.json文件,将express和socket.io的依赖加进去。
@@ -117,51 +118,16 @@ socket.on('connected', function () {
117118

118119
```
119120
$ node app.js
120-
info - socket.io started
121-
TechNode is on port 3000!
122121
```
123122

124-
访问http://localhost:3000,试试看。
123+
`TechNode is on port 3000!`,访问`http://localhost:3000`,试试看。
125124

126125
### 最简单的聊天室
127126

128-
#### 使用bootstrap和angular
129-
130-
我们使用`bower`来做前端类库的管理,因此使用bower来初始化生成bower.json文件:
131-
132-
```
133-
➜ TechNode git:(master) ✗ bower init
134-
[?] name: TechNode
135-
[?] version: 0.0.0
136-
[?] description:
137-
[?] main file:
138-
[?] keywords:
139-
[?] authors: island205 <island205@gmail.com>
140-
[?] license: MIT
141-
[?] homepage: https://github.com/island205/TechNode
142-
[?] set currently installed components as dependencies? Yes
143-
[?] add commonly ignored files to ignore list? Yes
144-
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? No
127+
#### 使用Bootstrap和Angular.js
145128

146-
{
147-
name: 'TechNode',
148-
version: '0.0.0',
149-
homepage: 'https://github.com/island205/TechNode',
150-
authors: [
151-
'island205 <island205@gmail.com>'
152-
],
153-
license: 'MIT',
154-
ignore: [
155-
'**/.*',
156-
'node_modules',
157-
'bower_components',
158-
'test',
159-
'tests'
160-
]
161-
}
129+
我们使用`bower`来做前端类库的管理,因此使用`bower init`来初始化生成bower.json文件:
162130

163-
[?] Looks good? Yes
164-
```
165131
使用.bowerrc文件,为bower指定包的安装目录:
166132

167133
```
@@ -176,7 +142,7 @@ TechNode is on port 3000!
176142
- angular:我们的主角,前端MVC框架。
177143

178144
```
179-
➜ TechNode git:(master) ✗ bower install bootstrap angular --save
145+
bower install bootstrap angular --save
180146
```
181147

182148
将他们加入到index.html中:

0 commit comments

Comments
 (0)