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