Pusher-websocket-react-native stops working when changing screens, and changing screen back

[AntonioA-D-C]

I tried the advice I got in my other post where I couldn't find out exactly why the package was sometimes working and sometimes not, about storing it in a context causing unexpected behaviour

So I stopped storing it i n a context, and made it more or less how the examples in the page show.

Now I noticed it worked more consistently, however, thanks to working more consistently, I noticed when I changed screens, and went back to my original screen, the service stopped working, it could no longer receive messages.

Here's an example:

const pusher = Pusher.getInstance();

const onEvent = (event: PusherEvent)=>{
  console.log(`onEvent> ${event}`)
  Toast.show({
    type: "success",
    text1: "Nuevas Solicitudes",

  })
    queryClient.refetchQueries(['getMessages']);
}

const onSubscriptionSucceeded = (channelName) => {
  console.log(channelName)
  console.log(
    `onSubscriptionSucceeded: ${channelName} data: ${JSON.stringify(data)}`
  );
  const channel= pusher.getChannel(channelName);

  if (!channel) {
   console.log("FUCK");
   return
  }
  const me = channel;
//  onChangeMembers([...channel.members.values()]);
  console.log(me);
}

const onError = (message, code, error) => {
  console.log(`onError: ${message} code: ${code} exception: ${error}`);
};

const onSubscriptionError = (
  channelName,
  message,
  e
) => {
  log(`onSubscriptionError: ${message}, channelName: ${channelName} e: ${e}`);
};

const onDecryptionFailure = (eventName, reason) => {
  log(`onDecryptionFailure: ${eventName} reason: ${reason}`);
};

const onConnectionStateChange = (
  currentState,
  previousState
) => {
  console.log(
    `onConnectionStateChange. previousState=${previousState} newState=${currentState}`
  );
};
useFocusEffect(
  useCallback(()=>{
    alert("Testin'")
    async function startPusher(){
      try{
        await pusher.init({
          apiKey: APP_KEY,
          cluster: APP_CLUSTER,
          authEndpoint: APP_ENDPOINT,
          onConnectionStateChange,
          onError,
          onEvent,
          onSubscriptionSucceeded,
          onSubscriptionError,
          onDecryptionFailure,

        });
        await pusher.subscribe({channelName: `employee_${userID}_messages`, onEvent})
        await pusher.connect();
      } catch(e){
        console.log(`ERROR> ${e}`)
      }
    }
    startPusher()
  }, [])

)

[hichemfantar]

You're supposed to return a cleanup function in useCallback that unsubscribes from the channel

[benw-pusher]

Do you see any log output from your code when changing screen? I can see several log statements in your sample, and would be interested to see what the behaviour is when this issue is encountered.

[benw-pusher]

Looks to have been resolved https://github.com/pusher/pusher-websocket-react-native/issues/111#issuecomment-1959328185