3.3 KiB
3.3 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
589fc832f9fc0f352b528e79 | Send and Display Chat Messages | 2 | Enviar y mostrar mensajes de chat |
Description
$('form').submit(function(){ /*logic*/ });
) Dentro del código que está manejando el envío del formulario, debe emitir un evento después de definir 'messageToSend' pero antes de borrar el cuadro de texto
#m
. El evento debe llamarse 'mensaje de chat' y los datos solo deben ser 'messageToSend'. socket.emit('chat message', messageToSend);
Ahora, en su servidor, debe escuchar el zócalo para el evento "mensaje de chat" con los datos que se denominan "mensaje". Una vez que se recibe el evento, debe emitir el evento 'mensaje de chat' a todos los sockets io.emit
con los datos como un objeto que contiene 'nombre' y 'mensaje'. Ahora, nuevamente en su cliente, debe escuchar el 'mensaje de chat' del evento y, cuando se reciba, agregue un elemento de la lista a #messages
con el nombre de dos puntos y el mensaje. En este punto, el chat debe ser completamente funcional y ¡enviar mensajes a todos los clientes! Envía tu página cuando creas que lo has hecho bien. Si tiene errores, puede revisar el proyecto hasta este punto aquí para el servidor y aquí para el cliente . Instructions
Tests
tests:
- text: El servidor escucha el 'mensaje de chat' y luego lo emite correctamente
testString: 'getUserInput => $.get(getUserInput("url")+ "/_api/server.js") .then(data => { assert.match(data, /socket.on.*("|")chat message("|")[^]*io.emit.*("|")chat message("|").*name.*message/gi, "Your server should listen to the socket for "chat message" then emit to all users "chat message" with name and message in the data object"); }, xhr => { throw new Error(xhr.statusText); })'
- text: El cliente maneja y muestra correctamente los nuevos datos del evento 'mensaje de chat'
testString: 'getUserInput => $.get(getUserInput("url")+ "/public/client.js") .then(data => { assert.match(data, /socket.on.*("|")chat message("|")[^]*messages.*li/gi, "You should append a list item to #messages on your client within the "chat message" event listener to display the new message"); }, xhr => { throw new Error(xhr.statusText); })'
Challenge Seed
Solution
// solution required