2.8 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 589fc832f9fc0f352b528e79 | Enviar e exibir mensagens de bate-papo | 2 | 301562 | send-and-display-chat-messages |
--description--
É hora de começar a permitir que os clients enviem uma mensagem de bate-papo ao servidor para que seja enviada a todos os outros clients! No arquivo client.js, você deve ver que já há um bloco de tratamento de código quando o formulário de mensagens é enviado.
$('form').submit(function() {
/*logic*/
});
Dentro do código de envio do formulário, você deve enviar um evento depois de definir messageToSend, mas antes de limpar a caixa de texto #m. O evento deve ser nomeado 'chat message' e o dado devem ser simplesmente messageToSend.
socket.emit('chat message', messageToSend);
Agora, no servidor, você deve estar escutando o socket para o evento 'chat message' com os dados nomeados como message. Quando o evento for recebido, ele deve emitir o evento 'chat message' para todos os sockets io.emit com os dados sendo um objeto contendo name e message.
No client.js, agora, você deve escutar o evento 'chat message' e, quando ele for recebido, associe um item de lista a #messages com o nome, um sinal de dois-pontos e a mensagem!
Neste ponto, o chat deve estar totalmente funcional e enviando mensagens para todos os clients!
Envie sua página quando você achar que ela está certa. Se você encontrar erros, pode conferir o projeto concluído até este momento aqui.
--hints--
O servidor deve escutar por 'chat message' e, em seguida, emiti-la corretamente.
(getUserInput) =>
$.get(getUserInput('url') + '/_api/server.js').then(
(data) => {
assert.match(
data,
/socket.on.*('|")chat message('|")[^]*io.emit.*('|")chat message('|").*name.*message/gis,
'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);
}
);
O client deve manipular e exibir adequadamente os novos dados do evento 'chat message'.
(getUserInput) =>
$.get(getUserInput('url') + '/public/client.js').then(
(data) => {
assert.match(
data,
/socket.on.*('|")chat message('|")[^]*messages.*li/gis,
'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);
}
);
--solutions--
/**
Backend challenges don't need solutions,
because they would need to be tested against a full working project.
Please check our contributing guidelines to learn more.
*/