ConnectyCube / connectycube-reactnative-samples

Chat and Video Chat code samples for React Native, ConnectyCube
https://connectycube.com
Apache License 2.0
124 stars 111 forks source link

Chat does not Auto Reconnect #310

Open faisalur-rehman opened 1 year ago

faisalur-rehman commented 1 year ago

If the internet goes down, the chat gets disconnected and does not auto reconnect. Currently, I need to kill the app and open again in order to reconnect but I don't want that. Whenever my internet connection restores, I want it to reconnect on its own. Here is my config file:

connectyCubeConfig: [
    {
      appId: ****,
      authKey: '***********',
      authSecret: '*************',
    },
    {
      chat: {
        streamManagement: {
          enable: true,
        },
        reconnectionTimeInterval: 5,
        reconnect: {
          enable: true,
        },
      },
      debug: {
        mode: 1,
      },
    },
  ],

Here is the screenshot of the logs:

Screenshot 2023-03-13 at 11 53 29 AM
ccvlad commented 1 year ago

@faisalur-rehman

It will better manage the chat connection without auto-reconnect. The reconnect: {enable: true} works while WS is opened, but mobile OS usually kills the WS connections after some time of inactivity.

I suggest you manage the connection with chat via AppState listener and NetInfo

// save the network state in variable/store/state/ref/class_prop
let isOnline = false;

// save the current network state and return that offline state changed to online state
const fetchNetworkState = ({isConnected, isInternetReachable}) => {
  const isInternetOnline = typeof isInternetReachable === 'boolean' ? isInternetReachable : ConnectyCube.chat.isConnected;
  const isBackToOnline = !this.isOnline && isInternetOnline;

  isOnline = isInternetOnline;

  return isBackToOnline;
};

// run the function on the first start
const restoreCurrentNetworkState = async () => {
  const currNetInfo = await NetInfo.fetch();
  fetchNetworkState(currNetInfo);
};

// function that setups the network's listener; call unsubscribeNetInfo() to  unsubscribe
const unsubscribeNetInfo = NetInfo.addEventListener((currNetInfo) => {
  const isBackToOnline = fetchNetworkState(currNetInfo);

  if (isBackToOnline && !ConnectyCube.chat.isConnected) {
    ConnectyCube.chat.connect(params);
  }
});

Also, you can check ConnectyCube.chat.isConnected after app goes from background to foreground:

let appState = null;

// use appStateListener.remove() to remove the listener
const appStateListener = AppState.addEventListener( 'change', (nextAppState) => {
  if (nextAppState === 'active' && appState.match(/inactive|background/) && isOnline && !ConnectyCube.chat.isConnected) {
    ConnectyCube.chat.connect(params)
  }

  appState = nextAppState;
});

Mark chat connection as active/inactive depending on AppState to stop chat activity in the background - https://developers.connectycube.com/reactnative/messaging?id=mark-a-client-as-activeinactive. It notes chat server about user activity. For example, the server will send a push notification instead message to the user if he/she setups the inactive state.