51 lines
5.2 KiB
Markdown
51 lines
5.2 KiB
Markdown
|
---
|
|||
|
|
id: 589fc832f9fc0f352b528e78
|
|||
|
|
title: Announce New Users
|
|||
|
|
challengeType: 2
|
|||
|
|
videoUrl: ''
|
|||
|
|
localeTitle: Объявление новых пользователей
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Description
|
|||
|
|
<section id="description"> Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socketio/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-socketio/">GitHub</a> . Многие чаты могут оповещаться, когда пользователь подключается или отключается, а затем отображает это для всех подключенных пользователей в чате. Увидев, что вы уже выбрали событие для подключения и отключения, вам просто нужно будет изменить это событие для поддержки такой функции. Наиболее логичным способом является отправка 3-х частей данных с событием: имя пользователя, подключенного / отключенного, текущий счетчик пользователей, и если это имя связано или отключено. <hr> Измените имя события на «user» и, поскольку данные передают объект вместе с именами полей «name», «currentUsers» и «boolean» connected (если это правда, если соединение или false для отключения отправленного пользователя). Не забудьте внести изменения в обе точки, у которых было событие «счетчик пользователей», и установить отключить один, чтобы послал false для поля «подключено» вместо true, как событие, испущенное при подключении. <code>io.emit('user', {name: socket.request.user.name, currentUsers, connected: true});</code> Теперь у вашего клиента будет вся необходимая информация, чтобы правильно отображать текущий счет пользователя и аннуитет, когда пользователь подключается или отключается! Чтобы обработать это событие на стороне клиента, мы должны прослушать «пользователь», а затем обновить текущий счет пользователя, используя jQuery, чтобы изменить текст <code>#num-users</code> на «{NUMBER} пользователей онлайн», а также добавить <code><li></code> в неупорядоченный список с id 'messages' с '{NAME} имеет {join / left} чат.'. Реализация этого может выглядеть следующим образом: <pre> socket.on ('user', function (data) {
|
|||
|
|
$ ('# num-users'). text (data.currentUsers + 'пользователи онлайн);
|
|||
|
|
var message = data.name;
|
|||
|
|
if (data.connected) {
|
|||
|
|
сообщение + = 'присоединилось к чату.';
|
|||
|
|
} else {
|
|||
|
|
сообщение + = 'покидает чат.';
|
|||
|
|
}
|
|||
|
|
$ ('# messages'). append ($ ('<li>'). html ('<b>' + message + '<\ / b>'));
|
|||
|
|
}); </pre> Представьте свою страницу, когда вы думаете, что у вас все в порядке. </section>
|
|||
|
|
|
|||
|
|
## Instructions
|
|||
|
|
<section id="instructions">
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
## Tests
|
|||
|
|
<section id='tests'>
|
|||
|
|
|
|||
|
|
```yml
|
|||
|
|
tests:
|
|||
|
|
- text: 'Событие «пользователь» испускается с именем, currentUsers и подключенным'
|
|||
|
|
testString: 'getUserInput => $.get(getUserInput("url")+ "/_api/server.js") .then(data => { assert.match(data, /io.emit.*("|")user("|").*name.*currentUsers.*connected/gi, "You should have an event emitted named user sending name, currentUsers, and connected"); }, xhr => { throw new Error(xhr.statusText); })'
|
|||
|
|
- text: 'Клиент правильно обрабатывает и отображает новые данные из «пользовательского» события,'
|
|||
|
|
testString: 'getUserInput => $.get(getUserInput("url")+ "/public/client.js") .then(data => { assert.match(data, /socket.on.*("|")user("|")[^]*num-users/gi, "You should change the text of #num-users within on your client within the "user" even listener to show the current users connected"); assert.match(data, /socket.on.*("|")user("|")[^]*messages.*li/gi, "You should append a list item to #messages on your client within the "user" event listener to annouce a user came or went"); }, xhr => { throw new Error(xhr.statusText); })'
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
## Challenge Seed
|
|||
|
|
<section id='challengeSeed'>
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
## Solution
|
|||
|
|
<section id='solution'>
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
// solution required
|
|||
|
|
```
|
|||
|
|
</section>
|