freeCodeCamp

5.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
589fc832f9fc0f352b528e78	Announce New Users	2		Объявление новых пользователей

Description

Напомним, что этот проект строится на следующем стартовом проекте Glitch или клонируется из GitHub . Многие чаты могут оповещаться, когда пользователь подключается или отключается, а затем отображает это для всех подключенных пользователей в чате. Увидев, что вы уже выбрали событие для подключения и отключения, вам просто нужно будет изменить это событие для поддержки такой функции. Наиболее логичным способом является отправка 3-х частей данных с событием: имя пользователя, подключенного / отключенного, текущий счетчик пользователей, и если это имя связано или отключено.

Измените имя события на «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

5.2 KiB Raw Blame History Unescape Escape