The title says it all. How I can fix the speed of the android understanding that it is disconnected from the socket? My goal is to change the client window if he cant connect to the socket. In my electron app it's working fine, but on my android (I also checked on the emulator before) it's taking almost 1 minute to understand that the socket is not connected. The speed of reconnecting is fine I think.
Main App.tsx code:
import React, { Component, useEffect } from 'react';import { NativeBaseProvider, extendTheme, View, Text } from 'native-base';import { I18nManager } from "react-native";import { Authorization, Header, Main } from 'shared/components';import io from 'shared/classes/Socket';import globalProps from 'shared/Electron/GlobalProps';import { Socket } from 'socket.io-client';import { QueryClient, QueryClientProvider } from "react-query";import { ReactQueryDevtools } from "react-query/devtools";//LogBox.ignoreLogs(['Require cycle:', "Warning: Can't perform a React state update on an unmounted component."]);const styles = require("./styles.css");var socket: Socket;const config = { useSystemColorMode: false, initialColorMode: 'dark',};const customTheme = extendTheme({ config });const queryClient = new QueryClient();class App extends Component<{}, any> { constructor(props) { super(props); globalProps.platform = 'Android'; this.state = { connected: !globalProps.socket == false } } async initSocket() { if (!globalProps.socket) { globalProps.socket = await new io("192.168.1.146", 8080, "http").connect(); socket = globalProps.socket; } if (!socket) return; socket.on('connect', () => { globalProps.socket = socket; this.setState({ connected: true }); }); socket.on('disconnect', () => { delete globalProps.socket; this.setState({ connected: false }); }); socket.on('reload app', () => { this.forceUpdate(); }); socket.on('host list', (data) => { console.log(data); }); this.setState({ connected: true }); } async componentDidMount() { this.initSocket(); } async componentWillUnmount() { if (!globalProps.socket) return; delete globalProps.socket; if (!socket) return; socket.disconnect(); } render() { var jsx = <Text> Connecting to the server...</Text>; if (this.state.connected) { socket.emit('get hosts'); jsx = <Header />; if (globalProps.user) { jsx = (<><Header /><Main /></> ); } else { jsx = (<><Header /><Authorization /></> ); } } return (<NativeBaseProvider theme={customTheme}><QueryClientProvider client={queryClient}><View style={{...styles.all}}>{jsx}</View></QueryClientProvider></NativeBaseProvider> ) }}export default App;
Socket.IO code:
import { io } from 'socket.io-client';import * as client from 'socket.io-client';class Socket { private ip: string; private port: number; private type: string; private socket: client.Socket; constructor(ip: string, port: number, type: string) { this.ip = ip; this.port = port; this.type = type; } connect() { return new Promise(async (resolve, reject) => { this.socket = io(this.type +'://'+ this.ip +":" + this.port, { transports: ["polling"], reconnection: true, reconnectionDelay: 1000, reconnectionDelayMax: 1000, reconnectionAttempts: Infinity }); this.socket.on('connect', () => { resolve(this.socket); }); this.socket.on('data', async (data) => { console.log(data); }); }); } getSocket() { return this.socket; }}export default Socket;
Update 1: I noticed that when I save a file in my server and get it to reload the android and electron are almost at the same speed of showing the connecting to server thing and returning to the main menu of the app.