SelectJavaScript Publish/Subscribe Tutorial for Realtime Apps

These docs are for version 3.16.5 of the JavaScript SDK. To check out the docs for the latest version Click Here.

PubNub 4.0 for JavaScript is our latest and greatest! Please click here for our PubNub 4.0 for JavaScript docs and SDK.

PubNub 3.x for JavaScript will encounter End Of Life (EOL) July 1st, 2017. All users currently on 3.x should begin migrating to 4.x. The 3.x SDK will continue to work. We will no longer support it and if you run into an issue, we will request that you upgrade to the latest version before solving the issue.

If you have questions about the PubNub for JavaScript SDK, please contact us at

PubNub utilizes a Publish/Subscribe model for real-time data streaming and device signaling which lets you establish and maintain persistent socket connections to any device and push data to global audiences in less than ¼ of a second.
The atomic components that make up a data stream are API Keys, Messages, and Channels.
To build an application that leverages the PubNub Network for Data Streams with Publish and Subscribe, you will need PubNub API Keys which we provide when you Sign-Up.

You will need at the minimum a subscribe_key and publish_key. If a client will only subscribe, and not publish, then the client only need to initialize with the subscribe_key. For clients who will be publishing only, or publishing and subscribing (a client can both publish and subscribe), it will need to initialize with both the subscribe_key and the publish_key.

You only need to supply the publish_key to clients that will publish (send) data to your application over the PubNub network. A read-only client for example would not need to initialize with this key.

Although a secret_key is also provided to you along with your publish and subscribe keys in the Admin Portal, it is not required for plain-old publish and subscribe. You'll only need the secret_key if you are using PAM functionality, which we discuss more in the PAM Feature Tutorial.
A message consists of a channel, and its associated data payload. A publishing client publishes messages to a given channel, and a subscribing client receives only the messages associated with the channels its subscribed to.

PubNub Message payloads can contain any JSON data including Booleans, Strings, Numbers, Arrays, and Objects. Simply publish the native type per your platform, and the clients will JSON serialize the data for you. Subscribers will automatically deserialize the JSON for you into your platform's associated native type.
When creating a message, keep these limits in mind:
  • Maximum message size is 32KB
  • The message size includes the channel name
  • The message size is calculated after all URL encoding and JSON serialization has occured. Depending on your data, this could add > 4X the original message size.

Keeping your messages < 1.5KB in size will allow them to fit into a single TCP packet!

For further details please check:

Channels are created on-the-fly, and do not incur any additional charges to use one or many in your application. When you create a PubNub application, all messages will be associated with a channel.

In a unicast (AKA 1:1) design pattern, the channels can be unique for each client in one-to-one communication. For example, user1 subscribes to user1-private, and user2 subscribes to user2-private. Using this pattern, each client listens on a channel which only relevant data to that client is sent. It has the advantage of minimal network usage (each client receives only the data it needs) and minimal processing (no need for filtering unneeded data).

PubNub Galaxy                                                                                                                            
In a multicast (AKA 1:Many) design pattern, a public (AKA system, global, or admin) channel is used for global communications amongst all clients. For example, building off our previous example, while a user can speak to any other user on their private channel, since each client in the application is listening on their private channel AND the public channel, they can receive on either. When receiving a message on the public channel, it may or may not be relevant for that particular receiving client -- to get around this, the client can filter on some sort of key, allowing them to selectively process messages with specific interest to them.

PubNub Pulse
In many cases, based on the use case of your application, the pattern you choose may be unicast, multicast, or a combination. There is no right or wrong pattern to implement, but based on your use case, there may be an optimal, most efficient pattern.
Since the text length of the channel name is counted as part of the entire message, and as such, as part of the maximum message length, it is best to keep the channel name as short as efficiency and utility allows.

Channel names are UTF-8 compatible. Prohibited characters in a channel name are:
  • comma: ,
  • slash: /
  • backslash: \
  • period: .
  • asterisk: *
  • colon: :
The procedure to publish and subscribe is really quite simple:

  • Include the PubNub library
  • init() - instantiate a PubNub instance.
  • subscribe() - subscribe to a specific channel.
  • publish() - send a message on a specific channel.
  • unsubscribe() - additively unsubscribe to a specific channel.

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

        <script src=""></script>
If this PubNub instance will only be subscribing, you only need to pass the subscribe_key to initialize the instance. If this instance will be subscribing and publishing, you must also include the publish_key parameter.
 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. Not setting the UUID can significantly impact your billing if your account uses the Monthly Active Users (MAUs) based pricing model, and can also lead to unexpected behavior if you have Presence enabled.
// Initialize the instance

var pubnub = PUBNUB.init({
    publish_key: 'demo',
    subscribe_key: 'demo',
    error: function (error) {
        console.log('Error:', error);
The channel the messages will be published over is called my_channel. For this example, we will use the same instance to both publish and subscribe. To do this, we'll publish a message to the channel, but only after we're sure we've first successfully subscribed to the channel.

The publish() and subscribe() methods are pretty simple to use. For both publish() and subscribe(), the channel attribute defines the channel in use.

When using the subscribe() method, the callback is where received messages are called-back to:
// Subscribe to a channel

	channel : 'my_channel',
	message : function(m){
	error : function (error) {
		// Handle error here
During your application's lifecycle, you can call subscribe() repeatedly to additively subscribe to additional channels.
For publish(), the message attribute contains the data you are sending.
	channel : 'my_channel',
	message : 'Hello from the PubNub Javascript SDK!',
	callback : function(m){
The above code demonstrates how to subscribe, and how to publish. But what if your use-case requires that client instance not only subscribes and publishes, but also that its guaranteed to start publishing only AFTER it’s successfully subscribed? -- In other words, you want to guarantee it receives all of its own publishes?
The JavaScript client SDK, like many of the PubNub SDKs, is asynchronous -- publish() can, and most likely will, fire before the previously executed subscribe() call completes. The result is, for a single-client instance, you would never receive (via subscribing) the message you just published, because the subscribe operation did not complete before the message was published.
To get around this common case, we can take advantage of the optional connect callback in the subscribe method.
// Publish to a channel, but only 
// after we've connected from the subscriber

	channel : 'my_channel',
	message : function(m){
	connect : function(e) {
			channel : 'my_channel',        
			message : 'Hello from the PubNub Javascript SDK'
By following this pattern on a client that both subscribes and publishes when you want to be sure to subscribe to your own publishes, you’ll never miss receiving a message.
While you are subscribed to a channel, you will continue to receive messages published to that channel. To stop receiving messages on a given channel, you must unsubscribe() from the channel.
// Unsubscribe from 'my_channel'

	channel : 'my_channel',
Like subscribe(), unsubscribe() can be called multiple times to successively remove different channels from the active subscription list.
 Unsubscribing from all channels, and then subscribing to a new channel Y is not the same as subscribing to channel Y and then unsubscribing from the previously-subscribed channel(s). Unsubscribing from all channels resets the last-received timetoken and thus, there could be some gaps in the subscription that may lead to message loss.