VK Mini Apps — ломается после закрытия и открытия приложение на телефоне. Что делать?

Question

[throwNPE]

Есть приложение и сервер на socket.io.
Если закрыть приложение и подождать пока сервер отключить клиента и снова зайти, то приложение открывается на том моменте что и закрылось, но опять-же оно отключено от сервера и ивент отключения на клиентской части не сработал. Ну и самое удивительное, что если проверить подключен ли клиент к серверу, то вернет истину.

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

[throwNPE]

Ответ от Ивана Недзвецкого
Нет события disconnectReason, вам надо в обработчике события disconnect сделать setState который у вас сейчас в disconnectReason тогда вы увидите экран с кнопкой Переподключиться

Таймеры и интервалы созданные через функции setTimer и setInterval могут отключаться когда ваше приложение свернуто, вам надо подписаться на событие VKWebAppViewRestore из документации по VK Bridge и уже в нем восстановить работу всех интервалов созданных через setInterval