Failed to load resource: net::ERR_CONNECTION_REFUSED socket.io - node.js

Question

I am building a simple chat application using Socket.io, Node.js, and React.js.
The server on the backend connects fine at first.
However when trying to make requests to the server from my front end the server keeps on crashing. Anyone understand why?
Here is the error..
[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
server started on port 4000
new connection
events.js:109
throw new ERR_INVALID_ARG_TYPE('listener', 'Function', listener);
^
TypeError [ERR_INVALID_ARG_TYPE]: The "listener" argument must be of type function. Received undefined
at checkListener (events.js:109:11)
at _addListener (events.js:344:3)
at Socket.addListener (events.js:402:10)
at Namespace.<anonymous> (/Users/macbook/Projects/chat-react/server/index.js:16:10)
at Namespace.emit (events.js:311:20)
at Namespace.emit (/Users/macbook/Projects/chat-react/server/node_modules/socket.io/lib/namespace.js:213:10)
at /Users/macbook/Projects/chat-react/server/node_modules/socket.io/lib/namespace.js:181:14
at processTicksAndRejections (internal/process/task_queues.js:79:11) {
code: 'ERR_INVALID_ARG_TYPE'
}
[nodemon] app crashed - waiting for file changes before starting...
currently my server looks like this
index.js
const express = require ('express');
const socketio = require('socket.io');
const http = require('http');
const PORT = process.env.PORT || 4000;
const router = require('./router');
const app = express();
const server = http.createServer(app);
const io = socketio(server);
io.on('connection', (socket) => {
console.log('new connection');
socket.on('disconnect'), () => {
console.log('User has left!!');
}
});
app.use(router);
server.listen(PORT, () => console.log(`server started on port ${PORT}`));
and my client looks like this
Chat.js
import React, { useState, useEffect } from 'react';
import quertString from 'query-string';
import io from 'socket.io-client';
let socket;
const Chat = ({ location }) => {
const [name, setUserName] = useState('');
const [room, setRoomID] = useState('');
const ENDPOINT = 'localhost:4000';
useEffect(() => {
const { name, room } = quertString.parse(location.search);
socket = io(ENDPOINT);
setUserName(name);
setRoomID(room);
console.log(socket)
});
return (
<h1>Chat</h1>
)
};
export default Chat;
any help would be great.

Answer 1

You have an error with your code. Look here:
socket.on('disconnect'), () => {
console.log('User has left!!');
}
Notice something? Yes, the function you wanted to call is not in the parentheses. Even though that wouldn't cause a syntax error, you probably didn't want to do that. Instead, you need to put the function inside the parentheses, like so:
socket.on('disconnect', () => {
console.log('User has left!!');
});
Note: to learn more about the comma operator, refer to these sites:
https://javascriptweblog.wordpress.com/2011/04/04/the-javascript-comma-operator/.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator.
JS statement separator with commas