Client doesn't find "socket.io.js" file-CodePudding

I'm doing a personal project with Express, Handlebars and Socket.IO. I set up the Express and Handlebars part just fine, but when I try to connect the client to socket.io (by putting the script tag like it says on the page) it doesn't find it. I've tried installing "socket.io-client" but it also didn't work, same thing with the CDN installation that appears on socket.io's website.

This is my server:

const express = require('express');
const app = express();
const port = 3000;
const exphbs = require('express-handlebars');
const engine = exphbs.engine;
const http = require('http');
const socketio = require('socket.io');
const server = http.createServer(app);
const io = socketio(server);

app.engine('handlebars', engine());
app.set('view engine', 'handlebars');
app.set('views', './views');

app.use(express.static('public')); //Expongo al lado cliente la carpeta "public"


io.on('connection', socket => {
    console.log(`Socket ${socket.id} connected`)
})

app.get('/', (req, res) => {
    res.render("home");
})

app.get('/Hola', (req, res) => {
    res.render("hola");
})


app.listen(port, ()=> console.log(`App listening to port ${port}`));

I put the script tags on the main layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Game</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    
<h1 id="titulo">Card Game</h1>
{{{body}}}

<script src="/socket.io/socket.io.js"></script>
<script src="/js/main.js"></script>
</body>
</html>

The program doesn't have a problem finding the main.js file, which is in the public folder, but it just can't seem to find the socket.io.js.

Screenshot of the console error that I get when I run the program

Any help would be aprreciated!

CodePudding user response：

The problem is that you are creating two http servers, attaching socket.io and Express to one of them, but never starting that one. The other one has only Express attached to it.

You create one http server and attach socket.io to it with this:

const server = http.createServer(app);
const io = socketio(server);

But, that server is never started so it is not running. So, socket.io is not running.

You create another http server with this:

app.listen(port, ()=> console.log(`App listening to port ${port}`));

This one is started, but does not have socket.io attached to it, therefore nothing is installed to serve /socket.io/socket.io.js and thus the browser gets a 404 when requesting it.

To fix, change this line of code:

app.listen(port, ()=> console.log(`App listening to port ${port}`));

to this:

server.listen(port, ()=> console.log(`App listening to port ${port}`));

As a point of further explanation, inside of app.listen(), it does this:

app.listen = function listen() {
  var server = http.createServer(this);
  return server.listen.apply(server, arguments);
};

So, you can see that it's creating another http server that is not the one you attached socket.io to. You obviously don't need to create another one - you just need to call .listen() on the http server you already created.