Configuration API for PubNub Vue SDK

Vue V4 complete API reference for building real-time applications on PubNub, including basic usage and sample code.

You must include the PubNub Vue V4 SDK in your code before initializing the client.

<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.~~~1.0.1~~~.js"></script>

Initialization

Description

Use this method to initialize the PubNub Client API context and establish account-level credentials such as publish and subscribe keys. You can create an account and get your keys from the Admin Portal.

Method(s)

To Initialize PubNub you can use the following method(s) in the Vue V4 SDK:

Vue.use(PubNubVue, {String subscribeKey, String publishKey, String cipherKey, String authKey, Boolean logVerbosity, String uuid, Boolean ssl, String origin, Number presenceTimeout, Number heartbeatInterval, Boolean restore, Boolean keepAlive, Object keepAliveSettings, Boolean useInstanceId, Boolean suppressLeaveEvents, Number requestMessageCountThreshold, Boolean listenToBrowserNetworkEvents} )
ParameterTypeRequiredDefaultDescription
Operation ArgumentsHashYesA hash of arguments.
subscribeKeyStringYesSpecifies the subscribeKey to be used for subscribing to a channel. This key can be specified at initialization or along with a subscribe().
publishKeyStringOptionalSpecifies the publishKey to be used for publishing messages to a channel. This key can be specified at initialization or along with a publish().
cipherKeyStringOptionalIf passed, will encrypt the payloads.
authKeyStringOptionalIf Access Manager enabled, this key will be used on all requests.
logVerbosityBooleanOptionalfalselog HTTP information.
uuidStringYesUUID to use. You should set a unique UUID to identify the user or the device that connects to PubNub.
If you don't set the UUID, you won't be able to connect to PubNub.
sslBooleanOptionaltrue for v4.20.0 onwards,
false before v4.20.0
If set to true, requests will be made over HTTPS.
originStringOptionalps.pndsn.comIf a custom domain is required, SDK accepts it here.
presenceTimeoutNumberOptional300How long the server will consider the client alive for presence.The value is in seconds.
heartbeatIntervalNumberOptionalNot SetHow often the client will announce itself to server.The value is in seconds.
restoreBooleanOptionalfalsetrue to allow catch up on the front-end applications.
keepAliveBooleanOptionalfalseIf set to true, SDK will use the same TCP connection for each HTTP request, instead of opening a new one for each new request.
keepAliveSettingsObjectOptionalkeepAliveMsecs: 1000 freeSocketKeepAliveTimeout: 15000 timeout: 30000 maxSockets: Infinity maxFreeSockets: 256Set a custom parameters for setting your connection keepAlive if this is set to true.keepAliveMsecs: (Number) how often to send TCP KeepAlive packets over sockets.freeSocketKeepAliveTimeout: (Number) sets the free socket to timeout after freeSocketKeepAliveTimeout milliseconds of inactivity on the free socket.timeout: (Number) sets the working socket to timeout after timeout milliseconds of inactivity on the working socket.maxSockets: (Number) maximum number of sockets to allow per host.maxFreeSockets: (Number) maximum number of sockets to leave open in a free state.
suppressLeaveEventsBooleanOptionalfalseWhen true the SDK doesn't send out the leave requests.
requestMessageCountThresholdNumberOptional100PNRequestMessageCountExceededCategory is thrown when the number of messages into the payload is above of requestMessageCountThreshold.
listenToBrowserNetworkEventsBooleanOptionalfalseIf the browser fails to detect the network changes from WiFi to LAN and vice versa or you get reconnection issues, set the flag to false. This allows the SDK reconnection logic to take over.

Basic Usage

Applications can initialize the PubNub object by passing the subscribeKey and publishKey keys from your account. Each client should also pass a UUID that represents the user or the device that connects to PubNub.

Note

Always set the UUID to uniquely identify the user or device that connects to PubNub. This UUID should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the UUID, you won't be able to connect to PubNub.

import Vue from 'vue';
import PubNubVue from 'pubnub-vue';

Vue.use(PubNubVue, {
subscribeKey: "mySubscribeKey",
publishKey: "myPublishKey",
cipherKey: "myCipherKey",
authKey: "myAuthKey",
logVerbosity: true,
uuid: "myUniqueUUID",
ssl: true,
presenceTimeout: 130
});

Server Operations

For servers connecting to PubNub, setting a UUID is different than for a client device as there can be multiple instances of the server on the same machine and there is no "authentication" process for a server (at least not like an end user).

The API can be initialized with the secretKey if the server needs to administer Access Manager permissions for client applications. When you initialize PubNub with secretKey, you get root permissions for the Access Manager. With this feature you don't have to grant access to your servers to access channels or channel groups. The servers get all access on all channels and channel groups.

Note

Anyone with the secretKey can grant and revoke permissions to your app. Never let your secretKey be discovered, and only exchange and deliver it securely. Only use the secretKey on secure environments such as Node.js application or other server-side platforms.

Note

Always set the UUID to uniquely identify the user or device that connects to PubNub. This UUID should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the UUID, you won't be able to connect to PubNub.

var pubnub = new PubNub({
subscribeKey: "mySubscribeKey",
publishKey: "myPublishKey",
uuid: "myUniqueUUID",
secretKey: "secretKey",
heartbeatInterval: 0
});

Now that the pubnub object is instantiated, the client will be able to access the Access Manager functions. The pubnub object will use the secretKey to sign all Access Manager messages to the PubNub Network.

Other Examples

Initialization for a Read-Only client

In the case where a client will only read messages and never publish to a channel, you can simply omit the publishKey when initializing the client:

Note

Always set the UUID to uniquely identify the user or device that connects to PubNub. This UUID should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the UUID, you won't be able to connect to PubNub.

import Vue from 'vue';
import PubNubVue from 'pubnub-vue';

// Initialize for Read Only Client

Vue.use(PubNubVue, {
subscribeKey : 'demo'
});

Initializing with SSL Enabled

This examples demonstrates how to enable PubNub Transport Layer Encryption with TLS(formerly known as SSL). Just initialize the client with ssl set to true. The hard work is done, now the PubNub API takes care of the rest. Just subscribe and publish as usual and you are good to go.

Note

Always set the UUID to uniquely identify the user or device that connects to PubNub. This UUID should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the UUID, you won't be able to connect to PubNub.

var pubnub = new PubNub({
subscribeKey: "mySubscribeKey",
publishKey: "myPublishKey",
cipherKey: "myCipherKey",
authKey: "myAuthKey",
logVerbosity: true, // set false for production
uuid: "myUniqueUUID",
ssl: true
});

UUID

Description

A UUID (Universal Unique Identifier) is a required unique alphanumeric identifier used to identify the client to the PubNub platform. Each client must pass a UUID that represents the user or the device that connects to PubNub.

Setting the UUID

Set the UUID parameter when you instantiate a PubNub instance (i.e., new PubNub()). It is important that your application reuse the UUID on each device instead of generating a new UUID on each connection.

Note

Always set the UUID to uniquely identify the user or device that connects to PubNub. This UUID should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the UUID, you won't be able to connect to PubNub.

var pubnub = new PubNub({
subscribeKey: "mySubscribeKey",
publishKey: "myPublishKey",
uuid: "myUniqueUUID"
});

You can also call the following method to explicitly set the UUID:

pubnub.setUUID(string)
ParameterTypeRequiredDescription
uuidStringYesUUID to set.
import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();
pubnub.setUUID('myUniqueUUID');

Saving the UUID

Providing a value for the uuid parameter in the PubNub object initialization will result in that value getting saved in the browser's localStorage key (described above) automatically by the PubNub SDK. You may implement a different local caching strategy, as required.

Consider the following when implementing a UUID reuse strategy:

  1. On your server, generate a UUID the when a user creates a user profile (user registration process). You can generate this with the SDK, or by another method of your choosing.
  2. Pass the UUID back to the user upon successful login (authentication process).
  3. Persist the UUID on the device where it can be retrieved the next time the PubNub instance is instantiated. The PubNub instance might be instantiated multiple times as the app is left and re-entered, and you may not require a login with each new session.

Getting the UUID

Use this method to get the current UUID set on your application.This method doesn't take any arguments.

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();
pubnub.getUUID();
Note

Each PubNub SDK provides a UUID generator API (for example, generateUUID). It is not required that you use this API to create a UUID and this format of the UUID is not required (any string will do up to 64 characters). Just consider that whatever you use will be visible to other users (if a user peeks behind the scenes using the browser console or other tools), so you should not use a username or email as the UUID. The UUID should be something that can be easily replaced as required without user interaction or even knowledge that it has happened.

Generating the UUID

Use this method to generate a UUID.

PubNub.generateUUID();

Authentication Key

Description

This function provides the capability to reset a user's auth Key.

Typically auth Key is specified during initialization for PubNub Access Manager enabled applications. In the event that auth Key has expired or a new auth Key is issued to the client from a Security Authority, the new auth Key can be sent using setAuthKey().

Property

To Set Authentication Key you can use the following method(s) in the Vue V4 SDK:

pubnub.setAuthKey(string)
ParameterTypeRequiredDescription
keyStringYesAuth key to set.

Basic Usage

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();
pubnub.setAuthKey('my_authkey');

Returns

None.

Filter Expression

Requires Stream Controller add-on

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

Description

Stream filtering allows a subscriber to apply a filter to only receive messages that satisfy the conditions of the filter. The message filter is set by the subscribing client(s) but it is applied on the server side thus preventing unwanted messages (those that do not meet the conditions of the filter) from reaching the subscriber.

To set/get filters you can use the following method. To learn more about filtering, refer to the Publish Messages documentation.

Method(s)

  1. pubnub.setFilterExpression(String filterExpression)
    ParameterTypeRequiredDescription
    filterExpressionStringYesPSV2 feature to subscribe with a custom filter expression.
  2. pubnub.getFilterExpression()

    This method doesn't take any arguments.

Basic Usage

Set Filter Expression

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();
pubnub.setFilterExpression('such=wow');

Get Filter Expression

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();
pubnub.getFilterExpression();
Last updated on