freeCodeCamp

3.0 KiB

Raw Blame History

id	title	challengeType
589fc832f9fc0f352b528e79	Send and Display Chat Messages	2

Description

As a reminder, this project is being built upon the following starter project on Glitch, or cloned from GitHub. It's time you start allowing clients to send a chat message to the server to emit to all the clients! Already in your client.js file you should see there is already a block of code handling when the messgae form is submitted! ($('form').submit(function(){ /*logic*/ });)

Within the code you're handling the form submit you should emit an event after you define 'messageToSend' but before you clear the text box #m. The event should be named 'chat message' and the data should just be 'messageToSend'. socket.emit('chat message', messageToSend); Now on your server you should be listening to the socket for the event 'chat message' with the data being named 'message'. Once the event is received it should then emit the event 'chat message' to all sockets io.emit with the data being an object containing 'name' and 'message'. On your client now again, you should now listen for event 'chat message' and when received, append a list item to #messages with the name a colon and the message! At this point the chat should be fully functional and sending messages across all clients! Submit your page when you think you've got it right. If you're running into errors, you can check out the project up to this point here for the server and here for the client.

Instructions

Tests

tests:
  - text: Server listens for 'chat message' then emits it properly
    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: Client properly handling and displaying the new data from event 'chat message'
    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.0 KiB Raw Blame History