Como lembrete, este projeto está sendo construído sobre o seguinte projeto inicial no Glitch , ou clonado a partir do GitHub . Muitas salas de bate-papo podem anunciar quando um usuário se conecta ou desconecta e, em seguida, exibir isso para todos os usuários conectados no bate-papo. Como se você já estivesse emitindo um evento para conectar e desconectar, você só precisará modificar esse evento para oferecer suporte a esse recurso. A maneira mais lógica de fazer isso é enviar três partes de dados com o evento: nome do usuário conectado / desconectado, a contagem de usuários atual e, se esse nome se encontra conectado ou desconectado.
Altere o nome do evento para 'user' e como os dados passam um objeto ao longo contendo os campos 'name', 'currentUsers' e boolean 'connected' (para ser verdadeiro se for connection, ou false para desconexão do usuário enviado). Certifique-se de fazer a alteração em ambos os pontos em que tivemos o evento 'user count' e definimos a desconexão como enviada como false para o campo 'connected' em vez de true, como o evento emitido na conexão. io.emit('user', {name: socket.request.user.name, currentUsers, connected: true});
Agora seu cliente terá todas as informações necessárias para exibir corretamente a contagem atual de usuários e anunciar quando um usuário se conectar ou desconectar! Para lidar com esse evento no lado do cliente, devemos ouvir "usuário" e atualizar a contagem de usuários atual usando jQuery para alterar o texto de #num-users
para "{NUMBER} usuários on-line", bem como acrescentar um <li>
para a lista não ordenada com o id 'messages' com '{NAME} tem {joined / left} o chat.'. Uma implementação disso poderia se parecer com o seguinte: socket.on ('user', function (data) {
$ ('# num-users'). texto (data.currentUsers + 'users online');
var message = data.name;
if (data.connected) {
mensagem + = 'entrou no chat.';
} outro {
mensagem + = 'saiu do chat.';
}
$ ('# mensagens'). append ($ ('<li>'). html ('<b>' + mensagem + '<\ / b>'));
});
Envie sua página quando achar que está certo.
## Instructions