如何断开网络套接字？答案

【问题标题】：How to disconnect a websocket?如何断开网络套接字？
【发布时间】：2019-06-03 01:42:01
【问题描述】：

我正在使用 socket.io-client 连接 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 我正在调用socket api。调用 componentwillunmount 后，我需要断开套接字。

提前致谢。

【问题讨论】：

标签： reactjs sockets websocket socket.io react-redux

【解决方案1】：

您必须使用socket.disconnect() 或socket.close()。

您可以在文档here.中了解有关断开连接和连接的更多信息

以下是将套接字保存到状态的代码，以便您以后可以使用它来调用。

componentDidMount(){
   this.initSocket();
}

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

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

   this.setState({ socket });
}

使用socket from state调用.disconnect函数

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

如果您在另一个组件中调用断开连接函数，则通过 props 或 redux 从状态传递套接字

【讨论】：

【解决方案2】：

您是否尝试使您的套接字成为组件类的属性？

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();
  }
}

【讨论】：