Advanced Node and Express - Communicate by Emitting HELP!

I’m not sure how to pass this test. The test tells me that currentUsers is not defined, however it is clearly defined in my code.

    var currentUsers = 0;
    io.on('connection', socket => {
      console.log('A user has connected');
      ++currentUsers;
      io.emit('user count', currentUsers);
    });

It’s also telling me that server does not emit the count. I put io.emit inside the server.js.

I put the ‘socket.on’ in the client.js file, but I’m not sure if it belongs there.

$( document ).ready(function() {
    /*global io*/
  var socket = io();
  
  socket.on('user count', function(data){
    console.log(data);
  });

  // Form submittion with new message in field with id 'm'
  $('form').submit(function(){
    var messageToSend = $('#m').val();
    //send message to server here?
    $('#m').val('');
    return false; // prevent form submit from refreshing page
  });
  
});
3 Likes

I haven’t done this challenge, but what you are doing looks ok.

On the server side, you detect the connection with io.on('connection'), then with that same connection you emit to all connected clients with io.emit('user count') , note that if you were only wanting to emit to the specific client that just established the particular connection you’d use socket.emit('user count') or some other variation.

Next, on the client side you are listening for the ‘user count’ emit that you just emitted from the server with socket.on('user count') , which is correct.

So, I’d first check inside your browser’s console (the client that the server connected to and that you just emitted to) if you are getting the user count, you should be getting an updated user count, and then I’d also check this thread Advanced Node and Express - Communicate by Emitting Your client is listening for 'user count' event as well, as it appears that there may be a cors issue you need to straighten out with this problem.

I’m able to pass the test using your code but I don’t get the message in the console. I also passed the previous chanllenge without getting the message in the console.

3 Likes

Hey dxabier, are you looking at the debugger console for the actual browser window that your chat page is loaded in?

Possibly for you, something else entirely is going on, but for my part, I kept expecting to see the count printed out in the server side console where “A user has connected” gets logged, but a console.log statement from client.js won’t go to the server side. Since client.js is running from the front end/client-side, the console it prints to will belong to the browser. I realized this after temporarily adding
$('#m').val(data);
to the socket.on('user count') handler in client.js, and seeing that change the value of the input field as it appeared on the chat page.

Dereje1 actually included this in their post, but it flew over my head until I experimented a on the code for myself.

6 Likes

Hey esopp, thanks for you answer. If I remember well, it finally worked when I didnt upgrade one of the packages. I also remember that in order to get the chat to work exactly like the solution, I had to look at the code cuz at first I think it showed the number of people connected but not the messages on the chat, or something like that. It’s a very messy/hard module.

Thanks esopp I looked on the browser console and the count is showing

1 Like

@Dereje1 I came across this post trying to find something to understand this challenge, and I finally figured it out. I’m assuming the fact that client.js is being imported into an html page (chat.pug) which is being rendered with a GET response is what determines that the output should be logged to the client-side console as opposed to the server-side console? And I’m also assuming for that same reason that any variables declared in the client.js file would be local (client-side) as opposed to server-side?

This code worked for me, I noticed throughout the challenge people got stuck on tests failing by not having cors as a dependency and in the server.js file. So just ensure you have added cors in the package.json and also in the server.js file

const cors = require('cors');

app.use(cors());

2 Likes

Thanks! This made my tests pass