Socket Setup

For receiving and handling real time events, we're using the Pusher service;

Pusher Channels: For handling in app real time events. Refer the documentation here Pusher Channels Docs.
Pusher Beams: For handling push notifications. Refer the documentation here Pusher Beams Docs.

1. Pusher Channels Setup

To setup the pusher channels for in app real time events, you'll need to first configure the Pusher SDK according to the development plaform and secondly the pusher app credentials which will be provided in an ENV file.
After you have configured the Pusher Client SDK, you'll have to do 2 important things:

Subscribe to Presence Channel to inform the server about the user's online status and activities monitering.
Subscribe to Personal Channel for receiving the real time events such as notifications.

a. Subscribe Presence Channel

First initialize a Pusher Client instance using the Pusher Client SDK by sending the following data. You will have to first authenticate the user from our server as it's required by the Pusher to first authorize the Presence Channels. Provide the folloing endpoint and query parameters to the pusher instance configuration:

Endpoint

/user/notifications/get

Query Parameters

user_id containing the unique user's ID.
email containing the user email address.

Then after successfully initializing the Pusher Client instance, subscribe every user to the presence channel presence-urbanfits right when the app starts. And also remember to clean it up by unsubscirbing when the app unloads/unmounts.

b. Subscribe Personal Channel

Here are the steps to subscribe to the presence channel:

Initialize the Pusher Client instance by providing the cluster name value.
Subscribe to the user channel. The channel name should be comprised of the User ID prefixed by uf-user_ . For example if the user id is 65ddb7496a09ca290bec88b2 then the channel name would be uf-user_65ddb7496a09ca290bec88b2 .
And lastly bind a notification event listener callback. The event name for notification is new-notification .

2. Pusher Beams Setup

To setup the Pusher Beams you need to:

Initialize the Beams Client instance by providing the instanceId.
Start the beams client and add the device interest named after the user's ID e.g. 65ddb7496a09ca290bec88b2.
And setup the Pusher Service Worker. Follow the setup steps for mobile by referring the Pusher Beams Docs accordingly.