---
id: 589fc832f9fc0f352b528e79
title: Send and Display Chat Messages
challengeType: 2
videoUrl: ''
localeTitle: Enviar e exibir mensagens de bate-papo
---
## Description
Como lembrete, este projeto está sendo construído sobre o seguinte projeto inicial no Glitch , ou clonado a partir do GitHub . É hora de você começar a permitir que os clientes enviem uma mensagem de chat para o servidor para emitir para todos os clientes! Já no seu arquivo client.js você deve ver que já existe um bloco de manuseio de código quando o formulário de mensagem é enviado! ( $('form').submit(function(){ /*logic*/ });
)
Dentro do código que você está processando o formulário, envie um evento depois de definir 'messageToSend', mas antes de limpar a caixa de texto #m
. O evento deve ser chamado 'mensagem de chat' e os dados devem ser apenas 'messageToSend'. socket.emit('chat message', messageToSend);
Agora no seu servidor você deve estar ouvindo o socket para o evento 'mensagem de chat' com os dados sendo nomeados 'message'. Uma vez que o evento é recebido, ele deve emitir o evento 'mensagem de bate-papo' para todos os soquetes io.emit
com os dados sendo um objeto contendo 'nome' e 'mensagem'. Agora, no seu cliente novamente, você deve ouvir o evento 'mensagem de bate-papo' e, quando recebido, acrescentar um item da lista a # #messages
com o nome de dois-pontos e a mensagem! Neste ponto, o chat deve estar totalmente funcional e enviar mensagens para todos os clientes! Envie sua página quando achar que está certo. Se você estiver com erros, você pode verificar o projeto até este ponto aqui para o servidor e aqui para o cliente .
## Instructions
## Tests
```yml
tests:
- text: O servidor escuta "mensagem de bate-papo" e emite-a corretamente
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: Cliente manipulando e exibindo adequadamente os novos dados do evento 'mensagem de bate-papo'
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
```js
// solution required
```