freeCodeCamp

3.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
589fc832f9fc0f352b528e79	Send and Display Chat Messages	2		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

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

3.3 KiB Raw Blame History