, чтобы сохранить свой прогресс
Объявление новых пользователей
Напомним, что этот проект строится на следующем стартовом проекте 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>'));
}); Представьте свою страницу, когда вы думаете, что у вас все в порядке./**
* Your test output will go here.
*/