导航到不同屏幕时如何断开套接字

Question

我正在使用 socket.io-client 获取最新的加密币数据

constructor() {
    super();
      this.socket = openSocket('https://coincap.io');
    }

然后在componentDidMount中调用它

 componentDidMount() {
    this.socket.on('trades', (tradeMsg) => {
          for (let i=0; i< this.updateCoinData.length; i++) {
             console.log("it is being called still")
              if (this.updateCoinData[i]["short"] == tradeMsg.coin ) {
                  this.updateCoinData[i]["price"] = tradeMsg["message"]['msg']['price']
                  //Update the crypto Value state in Redux
                  this.props.updateCrypto(this.updateCoinData);
              }
          }
      })

由于套接字打开，它将继续发出消息。现在我想当我从一个屏幕导航到另一个屏幕时，套接字连接将断开，因此我正在做这样的事情

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

但即使我已经导航到不同的页面，我的套接字仍在继续发出信号，这意味着它仍然处于连接状态。

我不确定这是不是因为 react-navigation，但我在这里使用的是StackNavigator。

这是我的react-navigation 组件

export const MyScreen = createStackNavigator({
  Home: { 
    screen: CoinCap
  },
  CoinCapCharts: {
     screen: CoinCapCharts
    },
  CurrencySelection: {
    screen: CurrencySelection
  },
  CoinChart: {
    screen: CoinChart
  },
  News: {
    screen: News
  }

},{
    initialRouteName: 'Home',
    headerMode: 'none'
});

问题：当用户从一个屏幕导航到另一个屏幕时如何关闭套接字？并在用户导航到相同的给定屏幕时重新打开它？

Answer 1

解决方案

1。当您调用navigate 时，请先尝试断开套接字，如下所示。

navigate() {
    this.socket.disconnect();
    this.props.navigation.navigate('CoinCapCharts');
}

2。使用导航生命周期监听器：doc

• willFocus - 屏幕将聚焦
• willBlur - 屏幕将失去焦点
• didFocus - 屏幕聚焦（如果有过渡，则过渡完成）
• didBlur - 屏幕失焦（如果有过渡，则过渡完成）

---

componentDidMount() {
  this.didFocusSubscription = this.props.navigation.addListener(
    'willFocus', () => { DO_WHAT_YOU_WANT }
  );
}

componentWillUnmout() {
    this.didFocusSubscription.remove();
}

为什么？

当您浏览屏幕时，尤其是在使用StackNavigation 时，不能保证您的屏幕组件的 ummount。因为StackNavigation 对屏幕的堆栈使用推送和弹出，并且在推送另一个屏幕时不会卸载前一个屏幕。