Socket.io: Failed to load resource (404 not found)

Question

I created a simple test refer to this tutorial: https://youtu.be/HZWmrt3Jy10 but there is an error: Failed to load resource: :3000/socket.io/?EIO=4&transport=polling&t=Nt3f74j:1 the server responded with a status of 404 (Not Found)

this is server.js:

var express = require('express');
var app = express();

var server = app.listen(3000);

app.use(express.static('public'));

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

io.sockets.on('connection', newConnection);

function newConnection(socket) {
  console.log(socket);
  console.log('new connection');
}

this is sketch.js:

socket = io.connect('http://127.0.0.1:3000');

this is index.html:

<script src="https://cdn.socket.io/4.4.0/socket.io.js"></script>

I've tried socket.io: Failed to load resource Failed to load resource socket.io Failed to load resource - Socket.IO but they all don't work, it seems the socket client does not find socket.io

#update of the question:

1. According to the Troubleshooting document of socket.io Troubleshooting connection issues, I check URL https://localhost:3001/socket.io/?EIO=4&transport=polling and the result is entry not found: /socket.io, while it should return something like 0{"sid":"Lbo5JLzTotvW3g2LAAAA","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":5000}

2. I try to check whether socket.io is connected and the console output is connect failedError: xhr poll error. After I check Consistent "xhr poll error" is caused by hanging instances of XHRPolling, there should be some problems with socket's connection to the server, but I've no idea how to fix it

console.log(socket.connected);

socket.on('error', function()
{
    console.log("Sorry, there seems to be an issue with the connection!");
});

socket.on('connect_error', function(err)
{
    console.log("connect failed"+err);
});

socket.on('connection', function ()
{
    console.log("connected");
    socket.on('newPhoto',function()
    {
        load_posts();
    });
});