Presence API for Vue SDK

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

This method requires that the Presence add-on is enabled for your key in the Admin Portal.

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.

Cache

This method has a 3 second response cache time.

Method(s)

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

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

* required

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

Sample code

Get a list of UUIDs subscribed to channel

1import PubNubVue from 'pubnub-vue';
2

3const pubnub = PubNubVue.getInstance();
4

5pubnub.hereNow(
6    {
7        channels: ["ch1"],
8        channelGroups : ["cg1"],
9        includeUUIDs: true,
10        includeState: true
11    },
12    function(status, response) {
13        // handle status, response
14    }
15);

Response

1// Example of Status
2{
  error: false,
  operation: "PNHereNowOperation",
  statusCode: 200
6}
7

8// Example of Response
9{
  totalChannels: 1,
  totalOccupancy: 3,
  channels: {
      myChannel1: {
          occupants: [
              {
                  uuid: "User 524"
              },
              {
                  state: {
                      age: 18
                  },
                  uuid: "User 270"
              },
              {
                  state: {
                      age: 24
                  },
                  uuid: "User 594"
              }
          ],
          name: "my_channel",
          occupancy: 3
      }
  }
35}
show all 35 lines

Other examples

Requires Presence

This method requires that the Presence add-on is enabled for your key in the Admin Portal.

1import PubNubVue from 'pubnub-vue';
2

3const pubnub = PubNubVue.getInstance();
4

5pubnub.hereNow(
6    {
7        channels: ["my_channel"],
8        includeState: true
9    },
10    function(status, response) {
11        // handle status, response
12    }
13);

Example Response

1// Example of Status
2{
  "error": false,
  "operation": "PNHereNowOperation",
  "statusCode": 200
6}
7

8// Example of Response
9{
  "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
      }
  }
35}
show all 35 lines

Return occupancy only

Requires Presence

This method requires that the Presence add-on is enabled for your key in the Admin Portal.

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

1import PubNubVue from 'pubnub-vue';
2

3const pubnub = PubNubVue.getInstance();
4

5pubnub.hereNow(
6    {
7        channels: ["my_channel"],
8        includeUUIDs: false
9    },
10    function(status, response) {
11        // handle status, response
12    }
13);

Example Response

1// Example of Status
2{
3    "error": false,
4    "operation": "PNHereNowOperation",
5    "statusCode": 200
6}
7

8// Example of Response
9{
10    "totalChannels": 1,
11    "totalOccupancy": 3,
12    "channels": {
13        "my_channel": {
14            "occupants": [],
15            "name": "my_channel",
16            "occupancy": 3
17        }
18    }
19}
show all 19 lines

Channel group usage

Requires Presence

This method requires that the Presence add-on is enabled for your key in the Admin Portal.

1import PubNubVue from 'pubnub-vue';
2

3const pubnub = PubNubVue.getInstance();
4

5pubnub.hereNow(
6    {
7        channelGroups : ['my_channel_group']
8    },
9    function(status, response) {
10        // handle status, response
11    }
12);

Example Response

1// Example of Status
2{
  "error": false,
  "operation": "PNHereNowOperation",
  "statusCode": 200
6}
7

8// Example of Response
9{
  "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
      }
  }
38}
show all 38 lines

Sample code using promises

Requires Presence

This method requires that the Presence add-on is enabled for your key in the Admin Portal.

1import PubNubVue from 'pubnub-vue';
2

3const pubnub = PubNubVue.getInstance();
4

5pubnub.hereNow({
6    channels: ["ch1"],
7    channelGroups: ["cg1"],
8    includeUUIDs: true,
9    includeState: true
10}).then((response) => {
11    console.log(response);
12}).catch((error) => {
13    console.log(error);
14});

Returning state using promises

Requires Presence

This method requires that the Presence add-on is enabled for your key in the Admin Portal.

1import PubNubVue from 'pubnub-vue';
2

3const pubnub = PubNubVue.getInstance();
4

5pubnub.hereNow({
6    channels: ["my_channel"],
7    includeState: true
8}).then((response) => {
9    console.log(response);
10}).catch((error) => {
11    console.log(error);
12});

Return occupancy only using promises

Requires Presence

This method requires that the Presence add-on is enabled for your key in the Admin Portal.

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

1import PubNubVue from 'pubnub-vue';
2

3const pubnub = PubNubVue.getInstance();
4

5pubnub.hereNow({
6    channels: ["my_channel"],
7    includeUUIDs: false
8}).then((response) => {
9    console.log(response);
10}).catch((error) => {
11    console.log(error);
12});

Channel group usage using promises

Requires Presence

This method requires that the Presence add-on is enabled for your key in the Admin Portal.

1import PubNubVue from 'pubnub-vue';
2

3const pubnub = PubNubVue.getInstance();
4

5pubnub.hereNow({
6    channelGroups: ["my_channel_group"]
7}).then((response) => {
8    console.log(response);
9}).catch((error) => {
10    console.log(error);
11});

Where now

Requires Presence

This method requires that the Presence add-on is enabled for your key in the Admin Portal.

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 Vue SDK:

1whereNow ({String uuid},Function callback)

* required

Parameter	Description
`uuid` Type: String Default: `current uuid`	Specifies the `uuid` to return channel list for.
`callback` Type: Function Default: n/a	Executes on a successful/unsuccessful `whereNow`.

Sample code

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

1import PubNubVue from 'pubnub-vue';
2

3const pubnub = PubNubVue.getInstance();
4

5pubnub.whereNow(
6    {
7        uuid: "uuid"
8    },
9    function(status, response) {
10        // handle status, response
11    }
12);

Response

1// Example of Status
2{
3    error: false,
4    operation: "PNWhereNowOperation",
5    statusCode: 200
6}
7

8// Example of Response
9{
10    "channels": ["ch1", "ch2"]
11}

Other examples

Sample code using promises

1import PubNubVue from 'pubnub-vue';
2

3const pubnub = PubNubVue.getInstance();
4

5pubnub.whereNow({
6    uuid: "uuid"
7}).then((response) => {
8    console.log(response);
9}).catch((error) => {
10    console.log(error);
11});

User state

Requires Presence

This method requires that the Presence add-on is enabled for your key in the Admin Portal.

Clients can set a dynamic custom state (score, game state, location) for their users on one or more channels and store it on a channel as long as the user stays subscribed.

The state is not persisted, and when the client disconnects, the state data is lost. For more information, refer to Presence State.

Method(s)

Set state

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

* required

Parameter	Description
`channels` Type: Array	Either `channels` or `channelGroups` should be provided, Specifies the `channels` to set the state.
`channelGroups` Type: Array	Either `channels` or `channelGroups` should be provided, Specifies the Channel Group to set the state
`state` Type: Object	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` Type: Function	Executes on a successful/unsuccessful `setState`.

Get state

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

* required

Parameter	Description
`uuid` Type: String Default: `current uuid`	The subscriber `uuid` to get the current state.
`channels` Type: Array Default: n/a	Either `channels` or `channelGroups` should be provided, Specifies the `channels` to get the state.
`channelGroups` Type: Array Default: n/a	Either `channels` or `channelGroups` should be provided, Specifies the Channel Group to get the state.
`callback` Type: Function Default: n/a	Executes on a successful/unsuccessful `getState`.

Sample code

Set state

1import PubNubVue from 'pubnub-vue';
2

3const pubnub = PubNubVue.getInstance();
4

5pubnub.setState(
6    {
7        state: newState,
8        channels: ['ch1'],
9        channelGroups: ['cg1']
10    },
11    function(status, response) {
12        // handle status, response
13    }
14);

Get state

1import PubNubVue from 'pubnub-vue';
2

3const pubnub = PubNubVue.getInstance();
4

5pubnub.getState(
6    {
7        uuid: "uuid",
8        channels: ['ch1'],
9        channelGroups: ['cg1']
10    },
11    function(status, response) {
12        // handle status, response
13    }
14);

Response

Set state

1// Example of Status
2{
3    error: false,
4    operation: "PNSetStateOperation",
5    statusCode: 200
6}
7

8// Example of Response
9{
10    state: {
11        me: 'typing'
12    }
13}

Get state

1// Example of Status
2{
3    error: false,
4    operation: "PNGetStateOperation",
5    statusCode: 200
6}
7

8// Example of Response
9{
10    channels: {
11        ch1: {
12            me: 'typing'
13        }
14    }
15}

Other examples

Set state Basic usage using promises

1import PubNubVue from 'pubnub-vue';
2

3const pubnub = PubNubVue.getInstance();
4

5pubnub.setState({
6    state: newState,
7    channels: ['ch1'],
8    channelGroups: ['cg1']
9}).then((response) => {
10    console.log(response);
11}).catch((error) => {
12    console.log(error);
13});

Get state Basic usage using promises

1import PubNubVue from 'pubnub-vue';
2

3const pubnub = PubNubVue.getInstance();
4

5pubnub.getState({
6    uuid: "uuid",
7    channels: ['ch1'],
8    channelGroups: ['cg1']
9}).then((response) => {
10    console.log(response);
11}).catch((error) => {
12    console.log(error);
13});

Here now​

Requires Presence

Cache

Method(s)​

Sample code​

Get a list of UUIDs subscribed to channel​

Response​

Other examples​

Requires Presence

Return occupancy only​

Requires Presence

Channel group usage​

Requires Presence

Sample code using promises​

Requires Presence

Returning state using promises​

Requires Presence

Return occupancy only using promises​

Requires Presence

Channel group usage using promises​

Requires Presence

Where now​

Requires Presence

Description​

Note

Method(s)​

Sample code​

Get a list of channels a UUID is subscribed to​

Response​

Other examples​

Sample code using promises​

User state​

Requires Presence

Method(s)​

Set state​

Get state​

Sample code​

Set state​

Get state​

Response​

Set state​

Get state​

Other examples​

Set state Basic usage using promises​

Get state Basic usage using promises​

Here now

Method(s)

Sample code

Get a list of UUIDs subscribed to channel

Response

Other examples

Return occupancy only

Channel group usage

Sample code using promises

Returning state using promises

Return occupancy only using promises

Channel group usage using promises

Where now

Description

Method(s)

Sample code

Get a list of channels a UUID is subscribed to

Response

Other examples

Sample code using promises

User state

Method(s)

Set state

Get state

Sample code

Set state

Get state

Response

Set state

Get state

Other examples

Set state Basic usage using promises

Get state Basic usage using promises