-1

Если нажать на крестить в приложении и подождать, то соединение с 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

5
  • Объяснить по-человечески с примером кода
    – Yugofx
    5 июн 2020 в 5:43
  • Поправил. Не знаю какой еще код прикрепить.
    – NPE
    5 июн 2020 в 5:52
  • Это весь код, который есть у вас в приложении? 5 июн 2020 в 6:22
  • Прикрепил весь код
    – NPE
    5 июн 2020 в 6:25
  • Все еще актуальная проблема
    – NPE
    6 июн 2020 в 15:41

1 ответ 1

1

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

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

1
  • Не мог найти это событие, спасибо большое!
    – NPE
    10 июн 2020 в 10:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.