Presence API for PubNub 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 add-on

This method requires that the Presence add-on is enabled for your key in the Admin Portal. Read the support page on enabling add-on features on your keys.

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:

hereNow( {Array channels, Array channelGroups, Boolean includeUUIDs, Boolean includeState}, Function callback )
ParameterTypeRequiredDefaultDescription
Operation ArgumentsHashYesA hash of arguments.
channelsArrayOptionalSpecifies the channel name to return occupancy results. If channel is not provided, hereNow() will return data for all channels.
channelGroupsArrayOptionalThe channel group for which here now information should be received.
includeUUIDsBooleanOptionaltrueSetting uuid to false disables the return of uuids.
includeStateBooleanOptionalfalseSetting state to true enables the return of subscriber state information.
callbackFunctionOptionalExecutes on a successful/unsuccessful hereNow.

Basic Usage

Get a list of UUIDs subscribed to channel

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

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

Response

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

// Example of Response
{
totalChannels: 1,
totalOccupancy: 3,
channels: {
myChannel1: {
occupants: [
{
show all 35 lines

Other Examples

Requires Presence add-on

This method requires that the Presence add-on is enabled for your key in the Admin Portal. Read the support page on enabling add-on features on your keys.

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

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": [
{
show all 35 lines

Return Occupancy Only

Requires Presence add-on

This method requires that the Presence add-on is enabled for your key in the Admin Portal. Read the support page on enabling add-on features on your keys.

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

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

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",
show all 19 lines

Channel Group Usage

Requires Presence add-on

This method requires that the Presence add-on is enabled for your key in the Admin Portal. Read the support page on enabling add-on features on your keys.

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

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": [
{
show all 38 lines

Basic usage using Promises

Requires Presence add-on

This method requires that the Presence add-on is enabled for your key in the Admin Portal. Read the support page on enabling add-on features on your keys.

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

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-on

This method requires that the Presence add-on is enabled for your key in the Admin Portal. Read the support page on enabling add-on features on your keys.

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

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-on

This method requires that the Presence add-on is enabled for your key in the Admin Portal. Read the support page on enabling add-on features on your keys.

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

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

pubnub.hereNow({
channels: ["my_channel"],
includeUUIDs: false
}).then((response) => {
console.log(response);
}).catch((error) => {
console.log(error);
});

Channel Group Usage using Promises

Requires Presence add-on

This method requires that the Presence add-on is enabled for your key in the Admin Portal. Read the support page on enabling add-on features on your keys.

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

pubnub.hereNow({
channelGroups: ["my_channel_group"]
}).then((response) => {
console.log(response);
}).catch((error) => {
console.log(error);
});

Where Now

Requires Presence add-on

This method requires that the Presence add-on is enabled for your key in the Admin Portal. Read the support page on enabling add-on features on your keys.

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:

whereNow ({String uuid},Function callback)
ParameterTypeRequiredDefaultDescription
Operation ArgumentsHashYesA hash of arguments.
uuidStringOptionalcurrent uuidSpecifies the uuid to return channel list for.
callbackFunctionOptionalExecutes 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

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

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

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

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

User State

Requires Presence add-on

This method requires that the Presence add-on is enabled for your key in the Admin Portal. Read the support page on enabling add-on features on your keys.

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)
ParameterTypeRequiredDescription
Operation ArgumentsHashYesA hash of arguments.
channelsArrayOptionalEither channels or channelGroups should be provided, Specifies the channels to set the state.
channelGroupsArrayOptionalEither channels or channelGroups should be provided, Specifies the Channel Group to set the state
stateObjectOptionalJSON 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.
callbackFunctionOptionalExecutes on a successful/unsuccessful setState.

Get State

getState({String uuid, Arraychannels, ArraychannelGroups},Function callback)
ParameterTypeRequiredDefaultDescription
Operation ArgumentsHashYesA hash of arguments.
uuidStringOptionalcurrent uuidThe subscriber uuid to get the current state.
channelsArrayOptionalEither channels or channelGroups should be provided, Specifies the channels to get the state.
channelGroupsArrayOptionalEither channels or channelGroups should be provided, Specifies the Channel Group to get the state.
callbackFunctionOptionalExecutes on a successful/unsuccessful getState.

Basic Usage

Set State

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

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

Get State

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

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

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

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

Get State Basic usage using Promises

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

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