VK Mini Apps - breaks after closing and opening the application on the phone. What to do?

Question

JavaScript

There is an application and a server on socket.io.
If you close the application and wait until the server disconnects the client and re-enter, the application opens at the moment it was closed, but again it is disconnected from the server and the disconnect event on the client side did not work. Well, the most surprising thing is that if you check whether the client is connected to the server, it will return true.

import React from 'react';
import bridge from "@vkontakte/vk-bridge";
import io from 'socket.io-client'
import './css/MineFont.css'

import Game from './components/Game/js/Game'

import ClickerContent from './components/ClickerContent'
import BlackBar from './components/BlackBar/js/BlackBar'

import Profile from "./components/Profile"
import MenuContent from './components/MenuContent/js/MenuContent'

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      disconnectReason: undefined,
            coins: 0,
            socket: undefined,
            screen: 'main',
            profileInfo: undefined,
            accessToken: undefined,
            genUniqQuery: function(){
                return Math.random().toString()
            }
    }
    this.reconnect = this.reconnect.bind(this)
        this.setScreen = this.setScreen.bind(this)
    this.getScreen = this.getScreen.bind(this)
  }

  events() {
    this.state.socket.on('connect', () => {
      this.sendJoin()
        console.log('client connect')
    })
        this.state.socket.on('disconnect', () => {
      console.log('client disconnect') //Не срабатывает
    })
        this.state.socket.on('disconnectReason', (reason) => {
      this.setState({
        disconnectReason: reason
      })
    })
        this.state.socket.on('connect_error', () => {
      this.setState({
        disconnectReason: 'Не удалось подключиться к серверу'
      })
    })

        this.state.socket.on('profileInfo', (msg) => {
            console.log('profile')
            this.setState({
                profileInfo: msg
            })
    })
        this.state.socket.on('changeCoins', (msg) => {
            this.setState({
                coins: parseFloat(msg).toFixed(6)
            })
    })
  }

  sendJoin(){
    this.setState({
      disconnectReason: undefined
    })
  }

  reconnect(){
    this.setState({
      disconnectReason: undefined
    })
        this.state.socket.disconnect()
        this.state.socket.connect()
  }

  getTime(){
    return Math.floor(Date.now() / 1000)
  }

  setScreen(screen){
        this.setState({
            screen: screen
        })
    }

  getScreen(){
    switch(this.state.screen){
      case 'main': {
        return (
          <Game>
            <BlackBar screen="menu" icon="burg" coins={this.state.coins} setScreen={this.setScreen}/>
            <ClickerContent socket={this.state.socket} profileInfo={this.state.profileInfo}/>
          </Game>
        )
      }
      case 'menu': {
        return (
          <Game>
            <BlackBar screen="main" icon="back" coins={this.state.coins} setScreen={this.setScreen}/>
            <MenuContent setScreen={this.setScreen}/>
          </Game>
        )
      }
      case 'profile': {
        return (
          <Game>
            <BlackBar screen="menu" icon="back" coins={this.state.coins} setScreen={this.setScreen}/>
            <Profile profileInfo={this.state.profileInfo} socket={this.state.socket} genUniqQuery={this.state.genUniqQuery}/>
          </Game>
        )
      }
      default: {
        return (
          <h1>Ошибка!</h1>
        )
      }
    }
  }
  getFriends(){
    console.log("start")
    bridge.send('VKWebAppCallAPIMethod', {
      method: 'friends.get',
      params: {
        v: '5.107',
        access_token: App.access_token,
        user_id: 0,
        count: 100000
      }
    }).then(res => {
            this.state.socket.emit('friends', res.response.items)
    }).catch(err => {
            this.state.socket.emit('friends', [])
    })
  }

  requestToken(){
    bridge.send('VKWebAppGetAuthToken', {app_id: 7389425, scope: 'friends'})
      .then(res => {
        this.setState({
          access_token: res.access_token
        })
        this.getFriends()
      }).catch(err => {
        console.log(err)
      })
        let socket = io.connect('https://***:7777', {
            secure: true,
            timeout: 5000,
            reconnection: true,
            reconnectionDelay: 1000,
            reconnectionDelayMax : 2000,
            reconnectionAttempts: Infinity,
            query: window.location.search.substring(1)
        })
        this.setState({
            socket: socket
        })
        let a1 = setInterval(() => {
            if(this.state.socket === undefined){
            }else{
                clearInterval(a1)
                this.events()
                this.sendJoin()
            }
        }, 1)
  }

  componentWillMount(){
    this.requestToken()
  }

  render(){
      console.log(this.state.socket.connected) //Это возвращает true даже после того как сервер отключил клиента
    if(this.state.socket.connected && this.state.profileInfo !== undefined){
      return this.getScreen()
    }else{
      return(
        <div>
          <h1>Подключение...</h1>
          {this.state.disconnectReason !== undefined &&
          <div>
            <h1>{this.state.disconnectReason}</h1>
            <button onClick={this.reconnect}>Переподключиться</button>
          </div>
          }
        </div>
      )
    }
  }
}

export default App

Answer 1

Answer from Ivan Nedzvetsky There is no disconnectReason
event , you need to setState in the disconnect event handler which you now have in disconnectReason then you will see a screen with the Reconnect button Timers and intervals created through the setTimer and setInterval functions can be disconnected when your application is minimized, you need to subscribe to the event VKWebAppViewRestore from the VK Bridge documentation and already in it restore the operation of all intervals created via setInterval