3.9 KiB
3.9 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
589fc832f9fc0f352b528e78 | Announce New Users | 2 | Anunciar nuevos usuarios |
Description
Cambie el nombre del evento a "usuario" y, a medida que los datos pasan un objeto a lo largo de los campos que contienen "nombre", "usuarios actuales" y "conectado" booleano (para ser verdadero si la conexión, o falso para la desconexión del usuario enviado). Asegúrese de realizar el cambio en los dos puntos en los que tuvimos el evento 'cuenta de usuario' y configure la desconexión para que sea falsa para el campo 'conectado' en lugar de verdadero como el evento emitido en la conexión.
io.emit('user', {name: socket.request.user.name, currentUsers, connected: true});
¡Ahora su cliente tendrá toda la información necesaria para mostrar correctamente el recuento actual de usuarios y avisar cuando un usuario se conecte o desconecte! Para manejar este evento en el lado del cliente, debemos escuchar al 'usuario' y luego actualizar el conteo actual de usuarios usando jQuery para cambiar el texto de #num-users
a '{NÚMERO} usuarios en línea', así como agregar un <li>
a la lista no ordenada con id 'mensajes' con '{NOMBRE} ha {unido / dejado} el chat'. Una implementación de esto podría parecerse a la siguiente: socket.on ('usuario', función (datos) { $ ('# num-users'). text (data.currentUsers + 'usuarios en línea'); mensaje var = nombre.datos; if (data.connected) { mensaje + = 'se ha unido al chat.'; } else { mensaje + = 'ha salido del chat.'; } $ ('# messages'). append ($ ('<li>') .html ('<b>' + message + '<\ / b>')); });Envía tu página cuando creas que lo has hecho bien.
Instructions
Tests
tests:
- text: 'El evento "usuario" se emite con el nombre, los usuarios actuales y está 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: El cliente maneja y muestra correctamente los nuevos datos del evento 'usuario'
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