Socket can't connect to the server (apparently)

Tell us what’s happening:
Hi, I completed the challange “Set up the environment” (Advanced Node and Express) and it looks like i have set everything fine, however i can’t see the message ‘A user has connected’ no matter how much I try. In my client.js I do see the ‘DIV’ string i’m writing, which means client.js is correctly loaded and it’s working. I also have these script before calling client.js:

script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.2/socket.io.min.js')
script(src='/socket.io/socket.io.js')

I can't neither see 'test' which is console logged by client.js. What's wrong here? :(

**Your code so far**
//server.js

const app = express();
const http   = require('http').Server(app);
const io     = require('socket.io')(http);

let currentUsers = 0;
    
    //listening to connections from clients
    io.on('connection', function(socket){
      console.log('A user has connected.');
      currentUsers++;
      
      io.emit('user count', currentUsers);
    });

//client.js

$( document ).ready(function() {
  
  console.log('test');
  document.getElementById('test').innerHTML = 'DIV';
  
  /*global io*/  //special flag to recognize 'io'
  var socket = io();
  
  socket.on('user count', function(data){
    console.log(data);
  });

});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/information-security-and-quality-assurance/advanced-node-and-express/set-up-the-environment

EDIT: this is the source code https://glitch.com/edit/#!/farlokko-advanced-node

In server.js:

Require in express at the top:

const express = require('express');

Add a listener after requiring the http module:

http.listen(process.env.PORT || 3000);

Your application generating logs on two sides, a server side (i.e. Glitch console) and a client side (i.e. browser’s console) ‘A user has connected.’ message you can see on server side and ‘test’ from your client.
When you looking to the example you should find the pug which including script tag enclosed with script(src='/public/client.js') if file having script when it called it will show you the ‘test’ message on client and when you have connection then ''A user has connected" log display on server side.
Analyse all these @Farlokko

Thanks for the reply. I understand that, however i have not a log in my glitch console nor in my client console. Just nothing happens (even if clint.js is correctly loaded).

@joops75 thanks but i already have the express dependency and i’m listening on that port. I have no errors.

Have you tried opening the app in the browser by clicking on ‘Show Live’ at the top of the screen? You have to open the client (front end part of the app in a browser) before any ‘connection’ events can be emitted.

yes of course. You can try my app at the following link: https://farlokko-advanced-node.glitch.me/

If you login (you can register a new user or just login with admin-admin) and see a link which takes you to the chat page. This page load client.js which initialize the socket (var socket = io() ). At this point i would expect to see something but nothing appears :confused:

After logging in and going to the chat page I can see a console log of ‘test’ in my browser’s console. When you go to this page you should also see your server console log of ‘A user has connected.’ in the Glitch logs (only you can access this via your Glitch account).

Exactly. However i never see the ‘A user has connected’ message. I can see ‘test’ (and some unknown errors about https and favicon) but nothing appears in the glitch logs. I can see, for instance, that you registered as joops but it’s like var socket = io() doesn’t work as expected :frowning:

I noticed that my script tags in the body of views/pug/chat.pug are different to yours. I have three:

script(src='https://code.jquery.com/jquery-2.2.1.min.js', integrity='sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=', crossorigin='anonymous')
script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.2/socket.io.min.js')
script(src='/public/client.js')

You could try using these. If this doesn’t help, you could try looking at the official socket.io documentation. There is a guide at https://socket.io/get-started/chat/ which has a lot in common with the FCC curriculum.

If that fails you could try changing your browser to Firefox or Chrome if you’re not already using them (I’m using Firefox).

I found a solution. The problem was a wrong initialization of the passport.socketio module, which interfered with socket.io. The main problem probably was a wrong store(memoryStore instead of mongo-store) and a wrong key for the cookie (express.sid instead of connect.sid).

Finally socket initialization was ok and had to be io.connect(“host here”) where “host here” is the main host page of the glitch project (like “https://my-project.glitch.me/”).

Thanks to everybody for the help!