Как отключить сокет при переходе на другой экран - PullRequest
Новая
       7

Как отключить сокет при переходе на другой экран

0 голосов
/ 02 октября 2018

Я использую 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'
});

Вопрос: Как закрыть сокет, когда пользователь перемещается с одного экрана на другой?и включите его, когда пользователь перейдет к тому же экрану предоставления?

1 Ответ

0 голосов
/ 02 октября 2018

Решение

1.Попробуйте сначала отсоединить разъем при вызове navigate, как показано ниже. 

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

2.Использовать прослушиватель жизненного цикла навигации: документ

  • willFocus - экран будет сфокусирован
  • willBlur - экран будет не сфокусированным
  • didFocus - экрансфокусированный (если был переход, переход завершен)
  • didBlur - экран не сфокусирован (если был переход, переход завершен) 
componentDidMount() {
  this.didFocusSubscription = this.props.navigation.addListener(
    'willFocus', () => { DO_WHAT_YOU_WANT }
  );
}

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

Почему?

Утилита компонента экрана не гарантируется при навигации по экрану, особенно при использовании StackNavigation.Поскольку StackNavigation использует push и pop для стека экрана, и предыдущий экран не отключается при нажатии на другой экран.

...