0
173
Vistascliente socket.io haciendo 2 conexiones
Intenté usar las opciones mencionadas en el sitio web de socketio para aumentar el tiempo antes de la reconexión, deshabilitando la actualización de la conexión de http a websocket, habilitando la opción forceNew. Pero siempre hay 2 conexiones cada vez que se carga la página del cliente. Alguien tiene alguna idea de lo que está pasando. Estoy ansioso por dar más información si es necesario. Gracias por leer esto.
Código de cliente (React.js + TailwindCSS)
import "./App.css"; import { io } from "socket.io-client"; import Home from "./pages/Home/Home"; function App() { const socket = io("http://localhost:3000/"); socket.on("connect", () => { console.log(socket.id); console.log(socket.connected); }); return ( <div className="App"> <Home /> </div> ); }Código de servidor (Node.js)
import http from "http"; import { Server } from "socket.io"; import express from "express"; const app = express(); const server = http.createServer(app); const io = new Server(server, { cors: { origin: "http://localhost:3001", methods: ["GET", "POST"], }, }); io.on("connection", (client) => { console.log("client connected", client.id); client.on("event", (data) => {}); client.on("disconnect", () => {}); }); server.listen(3000); server.on("listening", () => console.log("listening"));Consola de cliente
2zcCMTkpbDtW-R5jAAA- true KdzGTWRxUIhlk0bKAAA_ trueConsola del servidor
listening client connected zh1zj5dnUb55zUdrAAAB client connected rQexCoY7B6Es_r_RAAAD 
1 Respuestas
Responde la pregunta0
Debe iniciar el socket dentro de un gancho useEffect ; de lo contrario, se ejecutará cada vez que su componente se vuelva a renderizar.
En este caso, la función io se activará solo una vez, dado que useEffect no tiene dependencias, solo se ejecutará una vez. Además, asegúrese de cerrar la conexión una vez que su aplicación esté desmontada
function App() { const [socket, setSocket] = useState(null); useEffect(() => { const s = io("http://localhost:3000/"); setSocket(s); return () => s.disconnect(); }, [setSocket]); return ( <div className="App"> <Home /> </div> ); }