referance content
Vue V4 complete API reference for building Realtime Applications on PubNub, including basic usage and sample code
Initialization
PubNub
Vue is a wrapper of PubNub JavaScript SDK version 4 that adds a few of extra features to simplify the integration with Vue:
- Trigger Events:
$pnGetMessage
,$pnGetPresence
,$pnGetStatus
will make your life easier in the Vue' World. - Autoload: An easy and fast way to recovery the history messages of your channel.
You can still use the native PubNub JavaScript SDK if you feel this will be more suitable for your situation.
Differences in usage with native Javascript SDK
PubNub Vue is a wrapper of PubNub Javascript, which offers the same feature and in the same way as Javascript SDK makes, So if you have experience using Javascript SDK will be fast to learn the features included for Vue SDK in other way if you want to learn more about PubNub JavaScript features refer to native PubNub JavaScript SDK manual.
Description
publishKey
and subscribeKey
.Method(s)
Initialize
Pubnub you can use the following method(s) in the Vue V4 SDK: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 asubscribe()
.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 apublish()
.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 Yes SDK generated random uuid
UUID
to use. You should set a uniqueUUID
to identify the user or the device that connects to PubNub.Allowing the SDK to generate a random
UUID
can result in significant billing impacts, particularly on an MAU pricing plan.ssl
Boolean Optional true
for v4.20.0 onwards,false
before v4.20.0If 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.0If 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
: 1000freeSocketKeepAliveTimeout
: 15000timeout
: 30000maxSockets
: InfinitymaxFreeSockets
: 256Set a custom parameters for setting your connection
keepAlive
if this is set totrue
.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 ofrequestMessageCountThreshold
.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
publish()
, subscribe()
, history()
, hereNow()
, etc.Other Examples
-
import Vue from 'vue'; import PubNubVue from 'pubnub-vue'; Vue.use(PubNubVue, { subscribeKey: "mySubscribeKey", publishKey: "myPublishKey", ssl: true });
- 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' });
- Set a custom
UUID
to identify your users.import Vue from 'vue'; import PubNubVue from 'pubnub-vue'; Vue.use(PubNubVue, { subscribeKey : 'mySubscribeKey', uuid: 'myUniqueUUID' });
This examples demonstrates how to enable PubNub Transport Layer Encryption with
SSL
. Just initialize the client withssl
set totrue
. 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 });
- 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.
For applications that will administer PAM permissions, the API is initialized with theAnyone with the
secretKey
can grant and revoke permissions to your app. Never let yoursecretKey
be discovered, and to only exchange it / deliver it securely. Only use thesecretKey
on secure environments such asNode.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.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 thesecretKey
to sign all PAM messages to the PubNub Network.
UUID
Description
Method(s)
UUID
you can use the following method(s) in Vue V4 SDKParameter Type Required Description uuid
String Yes UUID
to set.This method doesn't take any arguments.
Basic Usage
import PubNubVue from 'pubnub-vue';
const pubnub = PubNubVue.getInstance();
pubnub.setUUID('myUniqueUUID');
import PubNubVue from 'pubnub-vue';
const pubnub = PubNubVue.getInstance();
pubnub.getUUID();
Other Examples
-
import Vue from 'vue'; import PubNubVue from 'pubnub-vue'; Vue.use(PubNubVue, { subscribeKey: 'mySubscribeKey', publishKey: 'myPublishKey', uuid: 'myUniqueUUID' });
Authentication Key
Description
setAuthKey()
.Property
Set Authentication Key
you can use the following method(s) in the Vue V4 SDKParameter 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
http://www.pubnub.com/knowledge-base/discussion/644/how-do-i-enable-add-on-features-for-my-keys.
Description
Method(s)
Parameter Type Required Description filterExpression
String Yes PSV2 feature to subscribe
with a custom filter expression.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();