Socket.io on backend and socket.io client on react front end issue

// front end
import { io } from "socket.io-client";

const socket = io("http://localhost:3000");

socket.on("connect", () => {
  console.log("Connected to the server with ID:", socket.id);
});

// Export the socket instance to use it in components
export default socket;

// front end
import { io } from "socket.io-client";

const socket = io("http://localhost:3000");

socket.on("connect", () => {
  console.log("Connected to the server with ID:", socket.id);
});

// Export the socket instance to use it in components
export default socket;

// backend
const app = express();
const server = createServer(app);
const io = new Server(server, { cors: { origin: "http://localhost:5178" } });

io.on("connection", (socket) => {
  console.log("A user connected:", socket.id);
});

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
export { server, app };


import { server } from "./app.js";
import "dotenv/config";
server.listen(process.env.PORT, () => console.log("listening on port 3000"));

// backend
const app = express();
const server = createServer(app);
const io = new Server(server, { cors: { origin: "http://localhost:5178" } });

io.on("connection", (socket) => {
  console.log("A user connected:", socket.id);
});

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
export { server, app };


import { server } from "./app.js";
import "dotenv/config";
server.listen(process.env.PORT, () => console.log("listening on port 3000"));