反应组件socket.io不必要的连接

Question

I'm using socket.io-client in my react component. This is how most of the tutorials sugest to do that:

import openSocket from 'socket.io-client';
const socket = openSocket('http://localhost:8000');

This works fine (I was able to use socket.on and socket.emit in my functions/lifecycle hooks).

But declaring openSocket in this way causes connection request (every 25 second) even if component didn't mounted. This gives me an error (when I use npm start without backend) ERR_CONNECTION_REFUSED in console.

I found half-way solution for that by doing

componentWillUnmount(){
  socket.disconnect();
}

The problem with this is that it works only when I mount and after that unmount the component, the connection is still running if I just upen another rout like homepage for example.

Qustion: What is the best way to handle this? Where should I declare

const socket = openSocket('http://localhost:8000');

Thanks, and sorry for my Eng.

Answer 1

I think you'd prefer to create the connection when you actually need it. So, maybe when the component will or did mount. And dispose it right after you don't need it anymore.

Which component? I think would be the most top level component that depends on that connection.

Maybe give this a read and see if it makes sense for you to connect from a container component

Answer 2

When you do

import io from 'socket.io-client';
const socket = openSocket('http://localhost:8000');

The code runs when the component is loaded, which is usually means the page is loaded. You should only open the socket when the main component's (or relevant component)'s has mounted, using componentDidMount() , and then disconnect/close when the component unmounts, using componentWillUnmount() .

Secondly, the default import shouldn't be called openSocket . The default import is a function which let's you create a socket connection but does not open it. Opening the connection is a separate call after you create the socket. You should call it this instead:

import io from 'socket.io-client'

Summarizing the above, you could try to do something like this:

import io from 'socket.io-client'; // The default import should be called io.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.socket = io('http://localhost:8000');
  }

  componentDidMount() {
    this.socket.open();
    this.socket.emit('load_settings');
    this.socket.on('settings_loaded', (data) => {
      // we get settings data and can do something with it
      this.setState({
        settings: data,
      })
    });
  }

  componentWillUnmount() {
    this.socket.close();
  }

  render() {
    ...
  }
}