express connected to react

Connection.js

@@ -1,21 +0,0 @@
-const socketIO = require('socket.io');
-
-const io = (server) => {
-    return socketIO(server, {
-        cors: {
-            origin: "http://localhost:3000"
-        }
-    });
-}
-
-const connection = (io) => {
-    io.on('connection', (socket) => {
-        console.log(`User ${socket.id} connected`);
-
-        socket.on('disconnect', () => {
-            console.log(`User ${socket.id} disconnected`)
-        })
-    })
-}
-
-module.exports = { io, connection }

client/src/App.jsx

@@ -14,8 +14,9 @@ function App() {
   }, [setSocket]);
 
   useEffect(() => {
-    socket.on('connection', () => {
-      console.log(socket.id);
+    if (!socket) return;
+    socket.on('connection', (data) => {
+      console.log('connected!' + data);
     })
   }, [socket]);
 

index.js

@@ -1,23 +1,24 @@
 const express = require('express');
 const cors = require('cors');
 const http = require('http');
-
-const { io, connection } = require("./Connection");
+const socketIO = require("socket.io");
 
 const app = express();
 app.use(cors());
+
 const server = http.createServer(app);
-
-const socketIOMiddleware = (req, res, next) => {
-    req.io = io;
-    next();
-}
-
-server.use('/', (req, res) => {
-    res.send(connection(io(server)));
-})
+const io = socketIO(server, {
+    cors: {
+        origin: "http://localhost:3000"
+    }
+});
 
 server.listen(8000, (err) => {
     if (err) console.log(err);
     console.log("Listening on 8000");
-})
+    
+    io.on('connection', (socket) => {
+        console.log('new client connected.');
+        socket.emit('connection', 'data');
+    });
+})