GET http://localhost:8563/socket.io/?EIO=3&transport=polling&t=NEsUPis 404 (Not Found)

Question

I've spent days trying to figure out why this is not working, but I didn't get anything out of it.
I tried some other answers about this topic, but none seemed to work for me.
Answers tried:
How to resolve a Socket.io 404 (Not Found) error?

socket.io: Failed to load resource

GET http://localhost:3000/socket.io/socket.io.js 404 (Not Found)

Error: http://localhost:3001/socket.io/ 404 (Not Found)

Socket.io http://localhost:3000/socket.io/socket.io.js 404 (Not Found) - How to configure socket.IO - nodejs, apache2, websockets

Socket.io 404 Not Found

This is my code. File server.js:

//Dependencies
var express = require('express');
var io = require('socket.io').listen(server);
//Dependencies

//Global variables
var app = express();
var PORT = 3000;
const ROOT = {root : __dirname};
var players = [];
//Global variables

var server = app.listen(PORT, function() {
    console.log("Server process started successfully on port " + PORT + "\n");
});

app.get('/', function(req, res) {
    console.log("Server called from " + req.socket.remoteAddress + ":" + req.socket.remotePort + "\n");
    res.sendFile('html/access.html', ROOT);
});

app.get('/gameSelection', function(req, res) {
    let name = req.query.name;
    players.push(name);
    console.log("New player named " + name + " joined the hub." + "\n");
    console.log("Total active players: " + players.length + "\n");
    console.log("Complete list of active players: " + players + "\n");
    res.sendFile('sketches/menu/index.html', ROOT);
});

app.use(express.static(__dirname + '/sketches/menu'));

io.sockets.on('connection', function(socket){
    console.log("We have a new client: " + socket.id);
});

File access.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome traveler</title>
    </head>
    <body>
        <form method="GET" action="/gameSelection">
            Name: <input type="text" name="name" placeholder="Insert your name..." required>
            <input type="submit" value="submit">
        </form>
    </body>
</html>

File menu.js:

const socket = io.connect(window.location.origin);

function setup()
{
    createCanvas(600, 400);
    ellipse(100, 100, 50, 50);
}

function draw() {}

File index.html:

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
  <script language="javascript" type="text/javascript" src="menu.js"></script>

  <style> body { padding: 0; margin: 0; } </style>
</head>
<body>
</body>
</html>

As shown by the code, I'm trying to connect via socket.io a p5js page to my node server.
But when I get to the index.html page I get this error:

GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=NEsXBrx 404 (Not Found)
Request.create @ socket.io-1.4.5.js:1
Request @ socket.io-1.4.5.js:1
XHR.request @ socket.io-1.4.5.js:1
XHR.doPoll @ socket.io-1.4.5.js:1
Polling.poll @ socket.io-1.4.5.js:1
Polling.doOpen @ socket.io-1.4.5.js:1
Transport.open @ socket.io-1.4.5.js:1
Socket.open @ socket.io-1.4.5.js:1
Socket @ socket.io-1.4.5.js:1
Socket @ socket.io-1.4.5.js:1
Manager.open.Manager.connect @ socket.io-1.4.5.js:2
(anonymous) @ socket.io-1.4.5.js:3

I really cannot understand what's wrong with my code, so I hope someone can help.
Thanks in advance.

@Take-Some-Bytes doesn't app.listen() set the port for my Express app? — Riccardo Chimisso
No, it doesn't. expressjs.com/en/4x/api.html#app.listen. And anyways, you are creating your Socket.IO server before the app starts listening, so the port will be undefined. — Take-Some-Bytes

jfriend00 jfriend00 · Accepted Answer · 2020-08-04T02:41:54

You are executing this line of code:

var io = require('socket.io').listen(server);

Before server has a value. So, you end up doing this:

var io = require('socket.io').listen(undefined);

Which will probably create a separate web server on a default port which isn't the port you're trying to connect on.

You need to execute this line of code:

var io = require('socket.io').listen(server);

AFTER server already has a value.

Note, if you use const and let and get rid of all occurrences of var, then Javascript would appropriately tell you this was an error because you're attempting to use the variable before it's declaration. That is technically legal with var, but obviously leads to programming mistakes like this. Use let and const instead of var and you can't make this type of mistake nearly as easily.

GET http://localhost:8563/socket.io/?EIO=3&transport=polling&t=NEsUPis 404 (Not Found)

1 Answers