React JS socket.io-client opens multiple connections-CodePudding

I have a simple React JS app connected to a socket io server. Whenever I open the app in the browser, the client sends new connection request to the server every 5 seconds.

server:

const express = require('express');
const app = express();
const http = require('http');

const server = http.createServer(app);
const io = require('socket.io')(server);

io.on('connection', (socket) => {
    console.log('socket id:', socket.id);

})

server.listen(3001, () => {
    console.log('Listening on port 3001');
})

client:

import React from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:3001');

const App = () => {

  return (
    <div>Hi there!</div>
  );
}

export default App;

logs on the server:

socket id: ByXQEMgeVaQ5AGw1AAAA
socket id: 8LzNQsyeYq7GSEvqAAAB
socket id: bbuYEs4kKzjxXuBsAAAC
socket id: vwprv4hnJbRlStG4AAAD

I suspect there could be something wrong on my laptop, cause I don't see anything wrong in the code, any ideas?

Thanks in advance

CodePudding user response：

Can you try to wrap the client side socket creation in a useEffect that only runs once? I'm curious to see if the behavior still appears.

import React from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:3001');

const App = () => {

  useEffect(() => {
    const socket = io('http://localhost:3001');
  }, [])

  return (
    <div>Hi there!</div>
  );
}

export default App;

CodePudding user response：

I would recommend calling connect inside a useEffect and return the disconnect method to be called when the component dismounts.

const [socket, setSocket] = useState(null)
useEffect(() => {
  const newSocket = io('http://localhost:3001')
  setSocket(newSocket)

  return socket.disconnect()
}, [])

CodePudding user response：

Actually I just found the root cause, I had a mismatch between my client version and my server version. I updated the client version to v4 and now it is working