3.3 KiB
3.3 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
589fc832f9fc0f352b528e79 | Send and Display Chat Messages | 2 | Enviar e exibir mensagens de bate-papo |
Description
$('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
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
// solution required