Как отключить веб-сокет?

Question

Я использую socket.io-клиент для подключения websocket

import socketIOClient from "socket.io-client";

После успешного вызова API я открываю веб-сокет и могу подключиться к сокету и получить данные,

_dashboardStoreChange(type){
  if (type == 'SingleDashboard') {
        let singledashboard = DashboardStore._getSingleDashboard() || {};
        this.setState({ singledashboard }, ()=>{
          this.setState({
            dashboardName: this.state.singledashboard.data.dashboard_name,
           }, ()=>{
            let ns = '/dashboard';
            let access_token = localStorage.getItem("auth_token");
            let user_id = localStorage.getItem("user_id")+ +new Date();
            let query_data = {access_token : access_token, user_id: user_id};


            const socket = socketIOClient('http://192.168.0.57:9000'+ns,{query:query_data});
            socket.on("dashboard_data", data => this.setState({ socketresponse: data }, ()=>{
              localStorage.setItem("connected_socket_id", this.state.socketresponse.connected_socket_id);
            }));



            let chart_query_data = {"access_token":access_token, 'user_id' : user_id, dashboard_id: this.state.dashboard_id}
            socket.emit('fetch_graph_data', chart_query_data);

            socket.on('dashboard_data', data => this.setState({response: data}, ()=>{

            }));
          });

        });

     }

}

После успешного подключения к сокету я пытался отключить сокет от componentWillUnmount, как показано ниже

  componentWillUnmount() {
    DashboardStore.removeListener('change', this._dashboardStoreChange);
    DataConnectionStore.removeListener('change', this._dataconnectionStoreChange);


    let ns = '/dashboard';
    let access_token = localStorage.getItem("auth_token");
    let user_id = localStorage.getItem("user_id")+ +new Date();
    let query_data = {access_token : access_token, user_id: user_id};
    const socket = socketIOClient('http://192.168.0.57:9000'+ns,{query:query_data});


    let disconnect_query_data = {access_token : access_token, user_id: user_id}
    socket.emit('disconnect_socket', disconnect_query_data);
}

Но когда я снова использую сокет api, открывается другой сокет, без вызова как я могу отключиться.

как в socket переменной с использованием socketIOClient Я вызываю сокет API. после вызова componentwillunmount мне нужно отключить сокет.

Заранее спасибо.

Answer 1

Вы пытались сделать свой сокет атрибутом класса вашего компонента?

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.socket = SocketIOClient('http://192.168.0.57:9000'+ns,{query:query_data});
   }
  // some other code...

  compomnentWillUnmount() {
    this.socket.disconnect();
  }
}

Answer 2

Вы должны использовать socket.disconnect() или socket.close().

Подробнее об отключении и подключении вы можете узнать в документации здесь.

Ниже приведен код для сохранения сокета в состояние, чтобы вы могли использовать его позже для вызова.

componentDidMount(){
   this.initSocket();
}

initSocket() {
   const socket = socketIOClient(ENTER SOCKET URL HERE);

   socket.on('connect', () => {
      console.log("Connected");
    });

   this.setState({ socket });
}

Используйте сокет из состояния для вызова функции .disconnect

const { socket } = this.state;
socket.disconnect();

Если вы вызываете функцию отключения в другом компоненте, передайте сокет из состояния через props или redux