Reactjs / Express: socket.io is not getting messages - node.js

Question

The frontend is Reactjs:
componentDidMount(){
const socket = io.connect('ws://127.0.0.1:3001');
socket.on("connect", () => {
console.log('socket on connect; socket.id: ', socket.id); // Never printed!
});
socket.on("disconnect", () => {
console.log('socket on disconnect; socket.id: ', socket.id);
});
socket.on("hello", (res) => {
console.log('on hello: ', res); // Never printed!
});
socket.on("thank", (res) => {
console.log('on thank: ', res); // Never printed!
});
socket.emit("thank", "you");
};
The backend is Typescript / Express:
const app = express();
app.use(cors());
app.use(express.json());
app.use(express.urlencoded());
app.use(express.urlencoded({ extended: true }));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'build')));
... some custome middleware
var server = app.listen(3001);
// ------------------- configure Socket.io -------------------------
var io = require('socket.io').listen(server);
io.on("connection", function(socket: any) {
console.log("a user connected. socket: ", socket); // Never printed!
socket.emit('hello', 'world')
socket.emit('thank', 'you')
socket.on("thank", (res) => {
console.log('on thank: ', res); // Never printed!
});
});
// ----------------------------------------------------------------
I was hoping to send "world" and "you" on message "hello" and "thank" both from client to server and from server to client.
However, the line console.log("a user connected. socket: ", socket); was never executing on the server side.
Also the line console.log('socket on connect; socket.id: ', socket.id); was never printing on the client side.
Not to mention the "hello world" or "thank you" messages.
Moreover, I see a request of the form :
http://127.0.0.1:3001/socket.io/?EIO=4&transport=polling&t=Nk3yMzc
being made constantly and results in 404 not found
Question:
what is this GET request /socket.io/?EIO=4&transport=polling&t=****? What does it do? Why does it fire constantly?
The Express log is showing error:
RouteNotFoundError: Route '/socket.io/?EIO=4&transport=polling&t=Nk3zIhW' does not exist.
How can I solve this?
I'm making the Express app and the websocket share the port 3001. Some middlewares are designed for HTTP requests, and they are not for the websocket message. How can I make the websocket messages avoid the express middlewares?

Answer 1

The .listen function in your code below is to attach an httpServer to an already started WS server.
var io = require('socket.io').listen(server);
I think this should be:
var io = require('socket.io')(server);