Ломается приложение после закрытия и открытия

Если нажать на крестить в приложении и подождать, то соединение с socket.io пропадает, но при проверке соединения в render() пишет, что подключен. Ну и еще ломаются интервалы. Приложение якобы "замораживается" после закрытия и открытия. Что делать?

UPD

console.log(App.socket.connected)

Данная строка возвращает true, после того как на сервере написано, что клиент отключился

UPD 2

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
        }
        this.reconnect = this.reconnect.bind(this)
    }

    static socket = undefined
    static location = "main"
    static coins = 0
    static profileInfo = undefined
    static access_token = undefined
    static genUniqQuery = function(){
        return Math.random().toString()
    }

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

        App.socket.on('profileInfo', (msg) => {
            App.profileInfo = msg
        })
        App.socket.on('changeCoins', (msg) => {
            App.coins = parseFloat(msg).toFixed(6)
        })
    }

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

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

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

    getScreen(){
        switch(App.location){
            case "main": {
                return (
                    <Game>
                        <BlackBar location="menu" icon="burg"/>
                        <ClickerContent />
                    </Game>
                )
            }
            case "menu": {
                return (
                    <Game>
                        <BlackBar location="main" icon="back"/>
                        <MenuContent />
                    </Game>
                )
            }
            case "profile": {
                return (
                    <Game>
                        <BlackBar location="menu" icon="back"/>
                        <Profile />
                    </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 => {
            App.socket.emit('friends', res.response.items)
        }).catch(err => {
            App.socket.emit('friends', [])
        })
    }

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

    screenUpdate(){
        this.setState({
            intervals: {
                screen: setInterval(() => {
                    this.setState(this.state)
                    //console.log(document.hidden)
                }, 100)
            }
        })
    }

    componentWillMount(){
        this.screenUpdate()
        this.requestToken()
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        //console.log('upd')
    }

    componentWillUnmount(){
        //Destroy Screen Update
        //clearInterval(this.state.intervals.screen)
    }

    render(){
        console.log(App.socket.connected)
        if(App.socket.connected && App.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


Ответы (1 шт):

Автор решения: Иван Недзвецкий

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

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

→ Ссылка