VueVue V4 Configuration API Reference for Realtime Apps

Vue V4 complete API reference for building Realtime Applications on PubNub, including basic usage and sample code

Initialization

Description

Method(s)

1. 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} )

   Parameter	Type	Required	Defaults	Description
   Operation Arguments	Hash	Yes		A hash of arguments.
   subscribeKey	String	Yes		Specifies the subscribeKey to be used for subscribing to a channel. This key can be specified at initialization or along with a subscribe().
   publishKey	String	Optional		Specifies the publishKey to be used for publishing messages to a channel. This key can be specified at initialization or along with a publish().
   cipherKey	String	Optional		If passed, will encrypt the payloads.
   authKey	String	Optional		If PAM enabled, this key will be used on all requests.
   logVerbosity	Boolean	Optional	false	log HTTP information.
   uuid	String	Optional	SDK generated random uuid	UUID to use, if not passed, a random will be generated.
   ssl	Boolean	Optional	true for v4.20.0 onwards, false before v4.20.0	If set to true, requests will be made over HTTPS.
   origin	String	Optional	ps.pndsn.com	If a custom domain is required, SDK accepts it here.
   presenceTimeout	Number	Optional	300	How long the server will consider the client alive for presence. The value is in seconds.
   heartbeatInterval	Number	Optional	Not Set	How often the client will announce itself to server. The value is in seconds.
   restore	Boolean	Optional	false	true to allow catch up on the front-end applications.
   keepAlive	Boolean	Optional	true for v4.18.0 onwards, false before v4.18.0	If set to true, SDK will use the same TCP connection for each HTTP request, instead of opening a new one for each new request.
   keepAliveSettings	Object	Optional	keepAliveMsecs: 1000 freeSocketKeepAliveTimeout: 15000 timeout: 30000 maxSockets: Infinity maxFreeSockets: 256	Set 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.
   suppressLeaveEvents	Boolean	Optional	false	When true the SDK doesn't send out the leave requests.
   requestMessageCountThreshold	Number	Optional	100	PNRequestMessageCountExceededCategory is thrown when the number of messages into the payload is above of requestMessageCountThreshold.
   listenToBrowserNetworkEvents	Boolean	Optional	false	If 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

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
});

Returns

Other Examples

1. Initialize the client:

   import Vue from 'vue';
   import PubNubVue from 'pubnub-vue';
   
   Vue.use(PubNubVue, {
       subscribeKey: "mySubscribeKey",
       publishKey: "myPublishKey",
       ssl: true
   });

2. 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:

   import Vue from 'vue';
   import PubNubVue from 'pubnub-vue';
   
   // Initialize for Read Only Client
   
   Vue.use(PubNubVue, { 
   	subscribeKey : 'demo' 
   });

3. Use a custom UUID
   Set a custom UUID to identify your users.

   import Vue from 'vue';
   import PubNubVue from 'pubnub-vue';
   
   Vue.use(PubNubVue, { 
   	subscribeKey : 'demo', 
   	uuid: 'myUniqueUUID' 
   });

4. Initializing with SSL Enabled:

   This examples demonstrates how to enable PubNub Transport Layer Encryption with 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.

   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
   });

5. Initializing with Access Manager:
   Requires Access Manager add-on XRequires that the Access Manager add-on is enabled for your key. See this page on enabling add-on features on your keys:
   
   http://www.pubnub.com/knowledge-base/discussion/644/how-do-i-enable-add-on-features-for-my-keys.

   Anyone with the secretKey can grant and revoke permissions to your app. Never let your secretKey be discovered, and to only exchange it / deliver it securely. Only use the secretKey on secure environments such as Node.js application or other server-side platforms. When you init 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 channel data. The servers get all access on all channels.

   For applications that will administer PAM permissions, the API is initialized with the secretKey as in the following example:

   import Vue from 'vue';
   import PubNubVue from 'pubnub-vue';
   
   Vue.use(PubNubVue, {
       subscribeKey: 'mySubscribeKey',
       publishKey: 'myPublishKey',
       secretKey: 'secretKey'
   });

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

UUID

Description

Method(s)

1. pubnub.setUUID(string)

   Parameter	Type	Required	Description
   uuid	String	Yes	UUID to set.

2. pubnub.getUUID()

   This method doesn't take any arguments.

Basic Usage

import PubNubVue from 'pubnub-vue';

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

import PubNubVue from 'pubnub-vue';

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

Other Examples

1. Initializing with a custom uuid:

   import Vue from 'vue';
   import PubNubVue from 'pubnub-vue';
   
   Vue.use(PubNubVue, {
       subscribeKey: 'mySubscribeKey',
       publishKey: 'myPublishKey',
       uuid: 'uuid123'
   });

Authentication Key

Description

Property

1. pubnub.setAuthKey(string)

   Parameter	Type	Required	Description
   key	String	Yes	Auth key to set.

Basic Usage

import PubNubVue from 'pubnub-vue';

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

Returns

Filter Expression

Description

Method(s)

1. pubnub.setFilterExpression(String filterExpression)

   Parameter	Type	Required	Description
   filterExpression	String	Yes	PSV2 feature to subscribe with a custom filter expression.

2. pubnub.getFilterExpression()

   This method doesn't take any arguments.

Basic Usage

import PubNubVue from 'pubnub-vue';

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

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();
pubnub.getFilterExpression();

Go to Publish & Subscribe