3.9 KiB
3.9 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
589fc832f9fc0f352b528e78 | Announce New Users | 2 | Anunciar novos usuários |
Description
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
Tests
tests:
- text: 'Evento "user" é emitido com nome, currentUsers e conectado'
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: Cliente manipulando e exibindo adequadamente os novos dados do evento 'usuário'
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