2018-10-10 22:03:03 +00:00
|
|
|
|
---
|
|
|
|
|
id: 589fc830f9fc0f352b528e74
|
2020-12-16 07:37:30 +00:00
|
|
|
|
title: 设置环境
|
2018-10-10 22:03:03 +00:00
|
|
|
|
challengeType: 2
|
2020-09-17 10:49:58 +00:00
|
|
|
|
forumTopicId: 301566
|
2021-01-13 02:31:00 +00:00
|
|
|
|
dashedName: set-up-the-environment
|
2018-10-10 22:03:03 +00:00
|
|
|
|
---
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --description--
|
2020-09-17 10:49:58 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
在接下来的挑战中,我们将会用到 `chat.pug` 文件。首先,你需要在你的 `routes.js` 文件中为 `/chat` 添加一个处理 GET 请求的路由,并给它传入 `ensureAuthenticated`。在回调函数中,我们需要让它 render `chat.pug` 文件,并在响应中包含 `{ user: req.user }` 信息。现在,请修改 `/auth/github/callback` 路由,让它可以像这样设置 user_id:`req.session.user_id = req.user.id`,并在设置完成后重定向至 `/chat`。
|
2020-09-17 10:49:58 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
我们还需要添加 `http` 和 `socket.io` 两个依赖项,并且像这样引入:
|
2020-09-17 10:49:58 +00:00
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
const http = require('http').createServer(app);
|
|
|
|
|
const io = require('socket.io')(http);
|
|
|
|
|
```
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
现在我们的 *express* 应用已经包含了 *http* 服务,接下来我们需要监听 *http* 服务的事件。为此,我们需要把 `app.listen` 更新为 `http.listen`。
|
2020-09-17 10:49:58 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
我们需要处理的第一件事是监听从客户端发出的连接事件,我们可以调用 <dfn>on</dfn> 方法来监听具体的事件。它接收两个参数:一个是发出的事件的标题字符串,另一个是后续用来传递数据的回调函数。在这个回调函数中,我们用 *socket* 来代表它所包含的数据。简单来说,socket 就是指已连接到服务器的客户端。
|
2020-09-17 10:49:58 +00:00
|
|
|
|
|
|
|
|
|
为了可以监听服务器的连接事件,我们在数据库连接的部分加入如下代码:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
io.on('connection', socket => {
|
|
|
|
|
console.log('A user has connected');
|
|
|
|
|
});
|
|
|
|
|
```
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
对于发出连接事件的客户端,只需要在 `client.js` 中添加以下内容:
|
2020-09-17 10:49:58 +00:00
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
/*global io*/
|
|
|
|
|
let socket = io();
|
|
|
|
|
```
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
注意,这个 `client.js` 文件是在用户通过验证后才加载到客户端的。在这个文件中,我们没有定义 io 变量,但第一行的注释会阻止运行时产生的报错。不过,我们在 chat.pug 的页面上已经为你添加好了 Socket.IO 库的 CDN。
|
2020-09-17 10:49:58 +00:00
|
|
|
|
|
|
|
|
|
现在你可以重启一下你的 app,尝试一下验证用户,然后你应该会看到服务器的 console 里输出了 'A user has connected'。
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
**注意:** 只有在连接到处于同一个 url/server 上的 socket 时,`io()`才可以正常执行。如果需要连接到外部的 socket,就需要这样调用:`io.connect('URL');`。
|
2020-09-17 10:49:58 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
完成上述要求后,你可以在下方提交你的页面链接。如果你遇到了问题,可以参考 [这里](https://gist.github.com/camperbot/aae41cf59debc1a4755c9a00ee3859d1) 的答案。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --hints--
|
2020-09-17 10:49:58 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
应添加 Socket.IO 作为依赖。
|
2020-09-17 10:49:58 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
(getUserInput) =>
|
|
|
|
|
$.get(getUserInput('url') + '/_api/package.json').then(
|
|
|
|
|
(data) => {
|
|
|
|
|
var packJson = JSON.parse(data);
|
|
|
|
|
assert.property(
|
|
|
|
|
packJson.dependencies,
|
|
|
|
|
'socket.io',
|
|
|
|
|
'Your project should list "socket.io" as a dependency'
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
(xhr) => {
|
|
|
|
|
throw new Error(xhr.statusText);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
```
|
2020-09-17 10:49:58 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
应正确引入 `http`,并示例化为 `http`。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
(getUserInput) =>
|
|
|
|
|
$.get(getUserInput('url') + '/_api/server.js').then(
|
|
|
|
|
(data) => {
|
|
|
|
|
assert.match(
|
|
|
|
|
data,
|
|
|
|
|
/http.*=.*require.*('|")http\1/gi,
|
|
|
|
|
'Your project should list "http" as a dependency'
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
(xhr) => {
|
|
|
|
|
throw new Error(xhr.statusText);
|
|
|
|
|
}
|
|
|
|
|
);
|
2018-10-10 22:03:03 +00:00
|
|
|
|
```
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
应正确引入 `socket.io`,并示例化为 `io`。
|
2020-09-17 10:49:58 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
(getUserInput) =>
|
|
|
|
|
$.get(getUserInput('url') + '/_api/server.js').then(
|
|
|
|
|
(data) => {
|
|
|
|
|
assert.match(
|
|
|
|
|
data,
|
|
|
|
|
/io.*=.*require.*('|")socket.io\1.*http/gi,
|
|
|
|
|
'You should correctly require and instantiate socket.io as io.'
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
(xhr) => {
|
|
|
|
|
throw new Error(xhr.statusText);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
```
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
Socket.IO 应监听连接。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
(getUserInput) =>
|
|
|
|
|
$.get(getUserInput('url') + '/_api/server.js').then(
|
|
|
|
|
(data) => {
|
|
|
|
|
assert.match(
|
|
|
|
|
data,
|
|
|
|
|
/io.on.*('|")connection\1.*socket/gi,
|
|
|
|
|
'io should listen for "connection" and socket should be the 2nd arguments variable'
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
(xhr) => {
|
|
|
|
|
throw new Error(xhr.statusText);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
```
|
2020-09-17 10:49:58 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
客户端应连接到服务器。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
|
|
|
|
```js
|
2020-12-16 07:37:30 +00:00
|
|
|
|
(getUserInput) =>
|
|
|
|
|
$.get(getUserInput('url') + '/public/client.js').then(
|
|
|
|
|
(data) => {
|
|
|
|
|
assert.match(
|
|
|
|
|
data,
|
|
|
|
|
/socket.*=.*io/gi,
|
|
|
|
|
'Your client should be connection to server with the connection defined as socket'
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
(xhr) => {
|
|
|
|
|
throw new Error(xhr.statusText);
|
|
|
|
|
}
|
|
|
|
|
);
|
2018-10-10 22:03:03 +00:00
|
|
|
|
```
|
2020-08-13 15:24:35 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --solutions--
|
|
|
|
|
|
2021-01-13 02:31:00 +00:00
|
|
|
|
```js
|
|
|
|
|
/**
|
|
|
|
|
Backend challenges don't need solutions,
|
|
|
|
|
because they would need to be tested against a full working project.
|
|
|
|
|
Please check our contributing guidelines to learn more.
|
|
|
|
|
*/
|
|
|
|
|
```
|