pusher / pusher-websocket-react-native

React Native official Pusher SDK
MIT License
61 stars 52 forks source link

How to use multiple eventName to attach with event listner. #151

Open Sam-Simplifed opened 5 months ago

Sam-Simplifed commented 5 months ago

`` Use Case I've created a hook name use usePusher and I want to attach two events with same channel name. I'm creating a chat application , where after login user directed to dashboard , which is tab in bottom tab navigator. My application also have a inbox tab, where user can see received or sent messages. After login I am passing channel name and eventName which is "Notification-Count" in the usePusher hook inside dashboard which will update the count badge on inbox icon tab. Once I go to inbox , I'm registering another eventName which is "New-Message" , which I am using to show the new message in realtime.

Issue When I navigate to dashboard and registering the "Notification-Count" event, it's working fine . I'm receiving the updated count. But when I go to inbox screen, "New-Message" event replacing the "Notification-Count" event. I'm receiving the new messages but notification event not working Here's my code for custom hook for registering the event.

`import {useEffect} from 'react'; import {PUSHER_KEY, PUSHER_CLUSTER} from '@env'; import {Pusher} from '@pusher/pusher-websocket-react-native';

const usePusher = (channelName, eventName, onEvent) => { useEffect(() => { const pusher = Pusher.getInstance();

const initPusher = async () => {
  try {
    await pusher.init({
      apiKey: PUSHER_KEY,
      cluster: PUSHER_CLUSTER,
    });

    await pusher.subscribe({
      channelName,
      eventName,
      onEvent,
      onSubscriptionSucceeded,
      onSubscriptionError,
      onSubscriptionCount: count => {
        console.log('count:', count);
      },
      onError: error => {
        console.log('error:', error);
      },
    });
    console.log('pusher connected');
    await pusher.connect();
  } catch (e) {
    console.log(`ERROR: ${e}`);
  }
};

initPusher();
return () => {
  console.log('disconnecting from pusher');
  // pusher.disconnect();
};

}, [channelName, eventName]);

const onSubscriptionSucceeded = () => { console.log(channelName + ' ' + eventName + ' subscription succeeded'); }; const onSubscriptionError = error => { console.log(channelName + ' subscription error:', error); }; return null; };

export default usePusher; `