5.2 KiB
5.2 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
589fc832f9fc0f352b528e78 | Announce New Users | 2 | Объявление новых пользователей |
Description
Измените имя события на «user» и, поскольку данные передают объект вместе с именами полей «name», «currentUsers» и «boolean» connected (если это правда, если соединение или false для отключения отправленного пользователя). Не забудьте внести изменения в обе точки, у которых было событие «счетчик пользователей», и установить отключить один, чтобы послал false для поля «подключено» вместо true, как событие, испущенное при подключении.
io.emit('user', {name: socket.request.user.name, currentUsers, connected: true});
Теперь у вашего клиента будет вся необходимая информация, чтобы правильно отображать текущий счет пользователя и аннуитет, когда пользователь подключается или отключается! Чтобы обработать это событие на стороне клиента, мы должны прослушать «пользователь», а затем обновить текущий счет пользователя, используя jQuery, чтобы изменить текст #num-users
на «{NUMBER} пользователей онлайн», а также добавить <li>
в неупорядоченный список с id 'messages' с '{NAME} имеет {join / left} чат.'. Реализация этого может выглядеть следующим образом: 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>')); });Представьте свою страницу, когда вы думаете, что у вас все в порядке.
Instructions
Tests
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); })'
Challenge Seed
Solution
// solution required