Estoy tratando de configurar el socket en mi aplicación react.js ya existente. Es uno básico que usa express y node para conectarse a una base de datos mongoose. He configurado el socket en el lado del cliente.

Principal.js

 import { io } from 'socket.io-client' var socket = io.connect('http://localhost:3000') function Home(props) { const {username} = useParams() const [Username , setUsername] = useState("") const [SearchedData, setSearchedData] = useState() const [Data, setData] = useState() return ( <div className="App"> <NavBar CurrentUser={username} Search={setSearchedData}/> {(Data !== undefined)? <Content CurrentUser={username} Data={SearchedData} HomeData={Data}></Content> : <Loading></Loading>} </div>) }

servidor.js

 require('dotenv').config('./secret.env') const express = require("express") const app = express() const cors = require("cors") const router = express.Router(); const mongoose = require("mongoose") const mongo = require("mongodb") const server = app.listen(3000, () => { console.log("listening to on 3000") }) var socket = require('socket.io') var io = socket(server) io.on("connection",(socket) => { console.log("Socket Connection") }) app.use('/user', require("./route/NodeRoute")) app.use('/', require('./route/LoginRoute')) app.use('/create',require('./route/Create'));

Uso run npm start y nodemon serve.js para ejecutar el frontend y el backend. Pero la conexión al zócalo se realiza solo cuando finalizo la conexión a mi aplicación de reacción (CTRL + C) en la terminal. La aplicación se ejecuta en el puerto 3000 y el servidor se ejecuta en el 3001

Intenté usar otro puerto pero no funcionó.