freeCodeCamp

3.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
589fc832f9fc0f352b528e79	Send and Display Chat Messages	2		Enviar y mostrar mensajes de chat

Description

Como recordatorio, este proyecto se está construyendo sobre el siguiente proyecto de inicio en Glitch , o clonado desde GitHub . ¡Es hora de que empieces a permitir que los clientes envíen un mensaje de chat al servidor para emitir a todos los clientes! ¡Ya en su archivo client.js debería ver que ya existe un bloque de manejo de código cuando se envía el formulario de mensajes! ( $('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

3.3 KiB Raw Blame History