React V4 Presence API Reference for Realtime Apps

Note

This SDK version has been deprecated. A new version of the PubNub React framework 2.0 is now available. You can access it here

Presence enables you to track the online and offline status of users and devices in real time, as well as store custom state information. Presence provides authoritative information on:

When a user has joined or left a channel
Who, and how many, users are subscribed to a particular channel
Which channel(s) an individual user is subscribed to
Associated state information for these users

Learn more about our Presence feature here.

Here Now

Requires Presence add-on Requires that the Presence add-on is enabled for your key. See this page on enabling add-on features on your keys:
https://support.pubnub.com/hc/en-us/articles/360051974791-How-do-I-enable-add-on-features-for-my-keys-

Description

You can obtain information about the current state of a channel including a list of unique user-ids currently subscribed to the channel and the total occupancy count of the channel by calling the hereNow() function in your application.

Method(s)

To call Here Now you can use the following method(s) in the React V4 SDK:

hereNow( {Array channels, Array channelGroups, Boolean includeUUIDs, Boolean includeState}, Function callback )

Parameter	Type	Required	Defaults	Description
Operation Arguments	Hash	Yes		A hash of arguments.
`channels`	Array	Optional		Specifies the `channel` name to return occupancy results. If `channel` is not provided, `hereNow()` will return data for all `channels`.
`channelGroups`	Array	Optional		The `channel group` for which here now information should be received.
`includeUUIDs`	Boolean	Optional	`true`	Setting `uuid` to `false` disables the return of uuids.
`includeState`	Boolean	Optional	`false`	Setting state to `true` enables the return of subscriber state information.
`callback`	Function	Optional		Executes on a successful/unsuccessful `hereNow`.

Basic Usage

Get a list of UUIDs subscribed to channel:

this.pubnub.hereNow(
    {
        channels: ["my_channel"],
        channelGroups : ["my_channelGroup"],
        includeUUIDs: true,
        includeState: true
    },
    (status, response) => {
        console.log(status);
        console.log(response);
    }
);

Response

type hereNowResponse = {
    totalChannels: number, // totalChannels = get total of channels
    totalOccupancy: number, // totalOccupancy = get total of occupancies
    channels: object // channels = get a map with values for each channel with uuids and states for each occupant of the channel
}

Other Examples

Returning State:

pubnub.hereNow(
    {
        channels: ["my_channel"],
        includeState: true
    },
    function (status, response) {
        // handle status, response
    }
);

Example Response:

// Example of Status
{
    "error": false,
    "operation": "PNHereNowOperation",
    "statusCode": 200
}

// Example of Response
{
    "totalChannels": 1,
    "totalOccupancy": 3,
    "channels": {
        "my_channel": {
            "occupants": [
                {
                    "uuid": "User 1"
                },
                {
                    "state": {
                        "age": 18
                    },
                    "uuid": "User 2"
                },
                {
                    "state": {
                        "age": 24
                    },
                    "uuid": "User 3"
                }
            ],
            "name": "my_channel",
            "occupancy": 3
        }
    }
}

Return Occupancy Only:

You can return only the occupancy information for a single channel by specifying the channel and setting UUIDs to false:

pubnub.hereNow(
    {
        channels: ["my_channel"],
        includeUUIDs: false
    },
    function (status, response) {
        // handle status, response
    }
);

Example Response:

// Example of Status
{
    "error": false,
    "operation": "PNHereNowOperation",
    "statusCode": 200
}

// Example of Response
{
    "totalChannels": 1,
    "totalOccupancy": 3,
    "channels": {
        "my_channel": {
            "occupants": [],
            "name": "my_channel",
            "occupancy": 3
        }
    }
}

Returning UUIDs and occupancy for all channels:

You can return the list of UUIDs and occupancy for all channels by omitting the channel:

pubnub.hereNow(
    {
        includeUUIDs: true
    },
    function (status, response) {
        // handle status, response
    }
);

Example Response:

// Example of Status
{
    "error": false,
    "operation": "PNHereNowOperation",
    "statusCode": 200
}

// Example of Response
{
    "totalChannels": 2,
    "totalOccupancy": 3,
    "channels": {
        "my_channel_2": {
            "occupants": [
                {
                    "state": null,
                    "uuid": "User2"
                }
            ],
            "name": "my_channel_2",
            "occupancy": 1
        },
        "my_channel_1": {
            "occupants": [
                {
                    "state": null,
                    "uuid": "User1"
                },
                {
                    "state": null,
                    "uuid": "User3"
                }
            ],
            "name": "my_channel_1",
            "occupancy": 2
        }
    }
}

Return Occupancy for all channels:

You can return only the occupancy information (Global Here Now) by omitting the channel name

pubnub.hereNow(
    {
        includeUUIDs: true,
        includeState: true
    },
    function (status, response) {
        // handle status, response
    }
);

Example Response:

// Example of Status
{
    "error": false,
    "operation": "PNHereNowOperation",
    "statusCode": 200
}

// Example of Response
{
    "totalChannels": 2,
    "totalOccupancy": 3,
    "channels": {
        "my_channel_2": {
            "occupants": [
                {
                    "uuid": "User2"
                }
            ],
            "name": "my_channel_2",
            "occupancy": 1
        },
        "my_channel_1": {
            "occupants": [
                {
                    "state": {
                        "age": 24
                    },
                    "uuid": "User 3"
                },
                {
                    "uuid": "User1"
                }
            ],
            "name": "my_channel_1",
            "occupancy": 2
        }
    }
}

Channel Group Usage :

pubnub.hereNow(
    {
        channelGroups : ["my_channel_group"]
    },
    function (status, response) {
        // handle status, response
    }
);

Example Response:

// Example of Status
{
    "error": false,
    "operation": "PNHereNowOperation",
    "statusCode": 200
}

// Example of Response
{
    "totalChannels": 2,
    "totalOccupancy": 3,
    "channels": {
        "my_channel_1": {
            "occupants": [
                {
                    "state": null,
                    "uuid": "User1"
                },
                {
                    "state": null,
                    "uuid": "User3"
                }
            ],
            "name": "my_channel_1",
            "occupancy": 2
        },
        "my_channel_2": {
            "occupants": [
                {
                    "state": null,
                    "uuid": "User2"
                }
            ],
            "name": "my_channel_2",
            "occupancy": 1
        }
    }
}

Basic usage using Promises Requires Presence add-onRequires that the Presence add-on is enabled for your key. See this page on enabling add-on features on your keys:
https://support.pubnub.com/hc/en-us/articles/360051974791-How-do-I-enable-add-on-features-for-my-keys-
```
pubnub.hereNow({
    channels: ["ch1"],
    channelGroups : ["cg1"],
    includeUUIDs: true,
    includeState: true
}).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
});
```
Returning State using Promises: Requires Presence add-onRequires that the Presence add-on is enabled for your key. See this page on enabling add-on features on your keys:
https://support.pubnub.com/hc/en-us/articles/360051974791-How-do-I-enable-add-on-features-for-my-keys-
```
pubnub.hereNow({
    channels: ["my_channel"],
    includeState: true
}).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
});
```
Return Occupancy Only using Promises: Requires Presence add-onRequires that the Presence add-on is enabled for your key. See this page on enabling add-on features on your keys:
https://support.pubnub.com/hc/en-us/articles/360051974791-How-do-I-enable-add-on-features-for-my-keys-

You can return only the occupancy information for a single channel by specifying the channel and setting uuids to false:
```
pubnub.hereNow({
    channels: ["my_channel"],
    includeUUIDs: false
}).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
});
```
Returning uuids and occupancy for all channels using Promises: Requires Presence add-onRequires that the Presence add-on is enabled with Global Here Now checked for your key. See this page on enabling add-on features on your keys:
https://support.pubnub.com/hc/en-us/articles/360051974791-How-do-I-enable-add-on-features-for-my-keys-

You can return the list of uuids and occupancy for all channels by omitting the channel:
```
pubnub.hereNow({
    includeUUIDs: true
}).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
});
```
Return Occupancy for all channels using Promises: Requires Presence add-onRequires that the Presence add-on is enabled with Global Here Now checked for your key. See this page on enabling add-on features on your keys:
https://support.pubnub.com/hc/en-us/articles/360051974791-How-do-I-enable-add-on-features-for-my-keys-

You can return only the occupancy information (Global Here Now) by omitting the channel name
```
pubnub.hereNow({
    includeUUIDs: true,
    includeState: true
}).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
});
```
Channel Group Usage using Promises: Requires Presence add-on Requires that the Presence add-on is enabled for your key. See this page on enabling add-on features on your keys:
https://support.pubnub.com/hc/en-us/articles/360051974791-How-do-I-enable-add-on-features-for-my-keys-
```
pubnub.hereNow({
    channelGroups : ["my_channel_group"]
}).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
});
```

Where Now

Description

You can obtain information about the current list of channels to which a UUID is subscribed to by calling the whereNow function in your application.

Note

If the app is killed/crashes and restarted (or the page containing the PubNub instance is refreshed on the browser) within the heartbeat window no timeout event is generated.

Method(s)

To call whereNow you can use the following method(s) in the React V4 SDK:

whereNow ({String uuid},Function callback)

Parameter	Type	Required	Defaults	Description
Operation Arguments	Hash	Yes		A hash of arguments.
`uuid`	String	Optional	`current uuid`	Specifies the `uuid` to return channel list for.
`callback`	Function	Optional		Executes on a successful/unsuccessful `whereNow`.

Basic Usage

You simply need to define the uuid and the callback function to be used to send the data to as in the example below.

Get a list of channels a UUID is subscribed to:

pubnub.whereNow(
    {
        uuid: "uuid"
    },
    function (status, response) {
        // handle status, response
    }
);

Response

// Example of Status
{
    error: false,
    operation: "PNWhereNowOperation",
    statusCode: 200
}

// Example of Response
{
    "channels": ["ch1", "ch2"]
}

Other Examples

Basic usage using Promises

pubnub.whereNow({
    uuid: "uuid"
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});

User State

Description

The state API is used to set/get key/value pairs specific to a subscriber uuid.

State information is supplied as a JSON object of key/value pairs.

Method(s)

Set State :

setState({Array channels, Array channelGroups, Object state},Function callback)

Parameter	Type	Required	Description
Operation Arguments	Hash	Yes	A hash of arguments.
`channels`	Array	Optional	Either `channels` or `channelGroups` should be provided, Specifies the `channels` to set the state.
`channelGroups`	Array	Optional	Either `channels` or `channelGroups` should be provided, Specifies the Channel Group to set the state
`state`	Object	Optional	JSON object of key/value pairs with supported data-types of int, float and string. Nesting of key/values is not permitted and key names beginning with prefix `pn` are reserved. If the state parameter is undefined, the current state for the specified `uuid` will be returned. If a specified key already exists for the `uuid` it will be over-written with the new value. Key values can be deleted by setting the particular value to `null`.
`callback`	Function	Optional	Executes on a successful/unsuccessful `setState`.

Get State :

getState({String uuid, Arraychannels, ArraychannelGroups},Function callback)

Parameter	Type	Required	Defaults	Description
Operation Arguments	Hash	Yes		A hash of arguments.
`uuid`	String	Optional	`current uuid`	The subscriber `uuid` to get the current state.
`channels`	Array	Optional		Either `channels` or `channelGroups` should be provided, Specifies the `channels` to get the state.
`channelGroups`	Array	Optional		Either `channels` or `channelGroups` should be provided, Specifies the Channel Group to get the state.
`callback`	Function	Optional		Executes on a successful/unsuccessful `getState`.

Basic Usage

Set State :

pubnub.setState(
    {
        state: newState,
        channels: ['ch1'],
        channelGroups: ['cg1']
    },
    function (status, response) {
        // handle status, response
    }
);

Get State :

pubnub.getState(
    {
        uuid: "uuid",
        channels: ['ch1'],
        channelGroups: ['cg1']
    },
    function (status, response) {
        // handle status, response
    }
);

Response

Set State :

// Example of Status
{
    error: false,
    operation: "PNSetStateOperation",
    statusCode: 200
}

// Example of Response
{
    state: {
        me: 'typing'
    }
}

Get State :

// Example of Status
{
    error: false,
    operation: "PNGetStateOperation",
    statusCode: 200
}

// Example of Response
{
    channels: {
        ch1: {
            me: 'typing'
        }
    }
}

Other Examples

Set State Basic usage using Promises

pubnub.setState({
    state: newState,
    channels: ['ch1'],
    channelGroups: ['cg1']
}).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
});

Get State Basic usage using Promises

pubnub.getState({
    uuid: "uuid",
    channels: ['ch1'],
    channelGroups: ['cg1']
}).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
});