时间戳

首页 > 解决方案 > 如何断开网络套接字？

reactjs - 如何断开网络套接字？

问题描述

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

提前致谢。

标签： reactjssocketswebsocketsocket.ioreact-redux

解决方案

您必须使用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 从状态传递套接字

推荐阅读