@@ -47,7 +47,7 @@ app.use(function (req, res) {
47
47
48
48
var io = require('socket.io').listen(app.listen(port))
49
49
50
- io.sockets.on('connected ', function (socket) {
50
+ io.sockets.on('connection ', function (socket) {
51
51
socket.emit('connected')
52
52
})
53
53
@@ -59,25 +59,26 @@ console.log('TechNode is on port ' + port + '!')
59
59
60
60
```
61
61
app.use(express.static(__dirname + '/static'))
62
+ ```
62
63
64
+ 除了静态文件的请求意外,其他所有的HTTP请求,我们都转发到` index.html ` ,服务端不关心路由,所有的路由逻辑都交给客户端的Angular.js去处理。
65
+
66
+ ```
63
67
app.use(function (req, res) {
64
68
res.sendfile('./static/index.html')
65
69
})
66
70
```
67
71
68
- 除了静态文件的请求意外,其他所有的HTTP请求,我们都转发到 ` index.html ` ,服务端不关心路由,所有的路由逻辑都交给客户端的Angular.js去处理 。
72
+ 接下来就是建立服务端与浏览器端的socket服务。socket.io的API是基于事件的,我们监听着 ` connected ` 事件,如果有客户端链接上来,我们就可以获得一个socket对象,这样我们就可以和这个客户端实时通信了 。
69
73
70
74
```
71
75
var io = require('socket.io').listen(app.listen(port))
72
76
73
- io.sockets.on('connected ', function (socket) {
77
+ io.sockets.on('connection ', function (socket) {
74
78
socket.emit('connected')
75
79
})
76
80
```
77
81
78
- 接下来就是建立服务端与浏览器端的socket服务。socket.io的API是基于事件的,我们监听着` connected ` 事件,如果有客户端链接上来,我们就可以获得一个socket对象,这样我们就可以和这个客户端实时通信了。
79
-
80
-
81
82
新建` static ` 目录,添加` index.html ` 文件:
82
83
83
84
```
@@ -108,7 +109,7 @@ socket.on('connected', function () {
108
109
})
109
110
```
110
111
111
- 调用` io.connect ` ,传入socket服务器,获得一个socket对象,然后就可以和服务端通信了。
112
+ 调用` io.connect ` ,传入socket服务器,因为在本例中,socket服务器与静态服务器是同一个,可以简写为 ` / ` (实际上相当于 ` http://localhost:3000 ` ), 获得一个socket对象,然后就可以和服务端通信了。
112
113
113
114
114
115
别忘了使用` npm install express socket.io --save ` 安装` express ` 和` socket.io ` ,参数` --save ` 可以自动更新package.json文件,将express和socket.io的依赖加进去。
@@ -117,51 +118,16 @@ socket.on('connected', function () {
117
118
118
119
```
119
120
$ node app.js
120
- info - socket.io started
121
- TechNode is on port 3000!
122
121
```
123
122
124
- 访问 http ://localhost:3000,试试看。
123
+ ` TechNode is on port 3000! ` ,访问 ` http ://localhost:3000` ,试试看。
125
124
126
125
### 最简单的聊天室
127
126
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
145
128
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文件:
162
130
163
- [?] Looks good? Yes
164
- ```
165
131
使用.bowerrc文件,为bower指定包的安装目录:
166
132
167
133
```
@@ -176,7 +142,7 @@ TechNode is on port 3000!
176
142
- angular:我们的主角,前端MVC框架。
177
143
178
144
```
179
- ➜ TechNode git:(master) ✗ bower install bootstrap angular --save
145
+ bower install bootstrap angular --save
180
146
```
181
147
182
148
将他们加入到index.html中:
0 commit comments