React V4React V4Node.jsPhoneGapWebJavaScriptReact V4 Configuration API Reference for Realtime Apps

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

PubNub React is a wrapper of PubNub JavaScript SDK version 4 that adds a few of extra features to simplify the integration with React\React Native:

  • Trigger Events: getMessage, getPresence, getStatus will make your life easier in the React' 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.

PubNub React is a wrapper of PubNub Javascript, which offers the same feature and in the same way like Javascript SDK makes, So if you have experience using Javascript SDK will be fast to learn the features included for React SDK in other way if you want to learn more about PubNub JavaScript features refer to native PubNub JavaScript SDK manual.

PubNub React works for both frameworks seamlessly the only difference will be how to you are going to implement all UI elements into the render() if your app is done with React or React Native.

That's it, you are ready to start using PubNub React SDK.

This function is used for initializing the PubNub Client API context. This function must be called before attempting to utilize any API functionality in order to establish account level credentials such as publishKey and subscribeKey.
To Initialize Pubnub you can use the following method(s) in the React V4 SDK:
  1. ParameterTypeRequiredDefaultsDescription
    Operation Arguments Hash YesA hash of arguments.
    subscribeKey String YesSpecifies the subscribeKey to be used for subscribing to a channel. This key can be specified at initialization or along with a subscribe().
    publishKey String OptionalSpecifies 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 OptionalIf passed, will encrypt the payloads.
    authKey StringOptionalIf PAM enabled, this key will be used on all requests.
    logVerbosity Boolean Optionalfalselog HTTP information.
    uuid String Optional SDK generated random uuidUUID to use, if not passed, a random will be generated.
    ssl Boolean Optional falseIf set to true, requests will be made over HTTPS, by default it is false unless the script is running on an https page.
    origin String Optional pubsub.pubnub.comIf 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 OptionalNot Set

    How often the client will announce itself to server.


    The value is in seconds.

    restore Boolean Optionalfalsetrue to allow catch up on the front-end applications.
    keepAliveBooleanOptional

    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.
    keepAliveSettingsObjectOptional

    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.

    suppressLeaveEventsBooleanOptionalWhen true the SDK doesn't send out the leave requests.
    requestMessageCountThresholdNumberOptionalPNRequestMessageCountExceededCategory is thrown when the number of messages into the payload is above of requestMessageCountThreshold.
    listenToBrowserNetworkEventsBooleanOptionaltrueIf 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 also the SDK reconnection logic to take over.
var pubnub = new PubNub({
	subscribeKey: "mySubscribeKey",
	publishKey: "myPublishKey",
	cipherKey: "myCipherKey",
	authKey: "myAuthKey",
	logVerbosity: true,
	uuid: "myUniqueUUID",
	ssl: true,
	presenceTimeout: 130
});
It returns the Pubnub instance for invoking PubNub APIs like publish(), subscribe(), history(), hereNow(), etc.
  1. this.pubnub = new PubNubReact({
        publishKey: 'YOUR PUBLISH KEY',
        subscribeKey: 'YOUR SUBSCRIBE KEY',
        ssl: true 
    });
    
  2. 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:
    // Initialize for Read Only Client
     
    var pubnub = new PubNub({
        subscribeKey : 'demo'
    });
  3. Under certain circumstances it useful to use a custom UUID to help in identifying your users.
    var pubnub = new PubNub ({
        subscribeKey: "mySubscribeKey",
        uuid: "myUniqueUUID"
    })
    
  4. 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.

    var pubnub = new PubNub({
    	subscribeKey: "mySubscribeKey",
    	publishKey: "myPublishKey",
    	cipherKey: "myCipherKey",
    	authKey: "myAuthKey",
    	logVerbosity: true,
    	uuid: "myUniqueUUID",
    	ssl: true,
    	presenceTimeout: 130
    });
  5. 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:
    var pubnub = new PubNub({
        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.
These functions are used to set/get a user ID on the fly.
To set/get UUID you can use the following method(s) in React V4 SDK
  1. ParameterTypeRequiredDescription
    uuid String YesUUID to set.
  2. This method doesn't take any arguments.

  3. This method doesn't take any arguments.

pubnub.setUUID("CustomUUID")
pubnub.getUUID();
PubNub.generateUUID();
  1. var channel = PubNub.generateUUID();
    
    pubnub.subscribe({
        channels: [channel]
    })
  2. var newUUID = PubNub.generateUUID();
    
    var pubnub = new PubNub ({ 
        uuid: newUUID, 
        subscribeKey: "mySubscribeKey",
        publishKey: "myPublishKey",
        secretKey: "secretKey"
    });
  3. var randomAuthKey = PubNub.generateUUID();
       
    var pubnub = new PubNub ({
    	authKey: randomAuthKey, 
    	subscribeKey: "mySubscribeKey",
    	publishKey: "myPublishKey",
    	secretKey: "secretKey"
    });
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().
To Set Authentication Key you can use the following method(s) in the React V4 SDK
  1. ParameterTypeRequiredDescription
    key String YesAuth key to set.
pubnub.setAuthKey("my_authkey");
None.
Requires Stream Controller add-on XRequires that the Stream Controller 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.
To set/get filters you can use the following methods.
  1. ParameterTypeRequiredDescription
    filterExpressionStringYesPSV2 feature to subscribe with a custom filter expression.
  2. This method doesn't take any arguments.

pubnub.setFilterExpression("such=wow");
pubnub.getFilterExpression();

Go to Publish & Subscribe