e3cfe80f88
* fix: add tests and steps * add necessary changes * edit for new boilerplate * fix: adjust content for boilerplate merge * add 4 passing 1 failing socketio * fix: add socketio changes * fix: update wording and http test Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * fix: replace glitch remix urls with repl.it urls * integrate steps between lessons 4 and 5 * add mongodb altas link * edit test to not require db deletion * correct register routing and formatting * fix typos and formatting * fix: typos, standardize spacing, and remove unnecessary hr elements * fix: add/update links Add or update Gist solution links at the bottom of each challenge. Also add a missing link/text to the top of one of the challenges. * fix: remove Repl.it/boilerplate repo links from all but first challenge * fix: add target='_blank' to links in challenges * add note about PIP browser issues * move PIP note to end of instructions Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>
3.0 KiB
id, title, challengeType, forumTopicId
| id | title | challengeType | forumTopicId |
|---|---|---|---|
| 589fc832f9fc0f352b528e79 | Send and Display Chat Messages | 2 | 301562 |
Description
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 message form is submitted.
$('form').submit(function() {
/*logic*/
});
Within the form submit code, 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.
In client.js, 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 completed up to this point here.
Instructions
Tests
tests:
- text: Server should listen for <code>'chat message'</code> and then emit 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/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); })
- text: Client should properly handle and display the new data from event <code>'chat message'</code>.
testString: '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); })'
Challenge Seed
Solution
/**
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.
*/