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.1 KiB
id, title, challengeType, forumTopicId
| id | title | challengeType | forumTopicId |
|---|---|---|---|
| 589fc831f9fc0f352b528e75 | Communicate by Emitting | 2 | 301550 |
Description
Emit is the most common way of communicating you will use. When you emit something from the server to 'io', you send an event's name and data to all the connected sockets. A good example of this concept would be emitting the current count of connected users each time a new user connects!
Start by adding a variable to keep track of the users, just before where you are currently listening for connections.
let currentUsers = 0;
Now, when someone connects, you should increment the count before emitting the count. So, you will want to add the incrementer within the connection listener.
++currentUsers;
Finally, after incrementing the count, you should emit the event (still within the connection listener). The event should be named 'user count', and the data should just be the currentUsers.
io.emit('user count', currentUsers);
Now, you can implement a way for your client to listen for this event! Similarly to listening for a connection on the server, you will use the on keyword.
socket.on('user count', function(data) {
console.log(data);
});
Now, try loading up your app, authenticate, and you should see in your client console '1' representing the current user count! Try loading more clients up, and authenticating to see the number go up.
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: currentUsers should be defined.
testString: getUserInput => $.get(getUserInput('url')+ '/_api/server.js').then(data => {assert.match(data, /currentUsers/gi, 'You should have variable currentUsers defined');}, xhr => { throw new Error(xhr.statusText); })
- text: Server should emit the current user count at each new connection.
testString: getUserInput => $.get(getUserInput('url')+ '/_api/server.js') .then(data => { assert.match(data, /io.emit.*('|")user count('|").*currentUsers/gi, 'You should emit "user count" with data currentUsers'); }, xhr => { throw new Error(xhr.statusText); })
- text: Your client should be listening for 'user count' event.
testString: getUserInput => $.get(getUserInput('url')+ '/public/client.js') .then(data => { assert.match(data, /socket.on.*('|")user count('|")/gi, 'Your client should be connection to server with the connection defined as socket'); }, 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.
*/