JavaScriptWebWebNode.jsPhoneGapReactReduxTitaniumVueJavaScript V4 SDK 4.29.8Node.js V4 SDK 4.29.8PhoneGap V4 SDK 4.29.8Titanium V4 SDK 4.29.8Vue V4 SDK 1.0.1

This page outlines the steps to follow to create a simple Hello, World application with PubNub. This covers the basics of integrating PubNub in your application: setting up a connection to PubNub, and sending and receiving messages.

PubNub account

Sign in or create an account to create an app on the PubNub Admin Portal and get the keys to use in your application.

When you create a new app, the first set of keys is generated automatically, but a single app can have as many keysets as you like. We recommend that you create separate keysets for production and test environments.

Download the SDK

Download the SDK from any of the following sources:

Use npm

To integrate PubNub into your project using npm:

npm install pubnub

Get the source code

Configure PubNub

In the IDE of your choice, create a new App file and add the following code. This is the minimum configuration you need to send and receive messages with PubNub.

Make sure to replace myPublishKey and mySubscribeKey with your app's publish and subscribe keys from the PubNub Dashboard.

const PubNub = require('pubnub');

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

For more information, refer to the Configuration section of the SDK documentation.

Add event listeners

Listeners help your app react to events and messages. You can implement custom app logic to respond to each type of message or event.

Copy the code below to configure your app such that when it receives an event of type PNConnectedCategory, it calls the publishSampleMessage() function.

pubnub.addListener({
    status: function(statusEvent) {
        if (statusEvent.category === "PNConnectedCategory") {
            publishSampleMessage();
        }
    },
    message: function(messageEvent) {
        console.log(messageEvent.message.title);
        console.log(messageEvent.message.description);
    },
    presence: function(presenceEvent) {
        // handle presence
    }
})

For more information, refer to the Listeners section of the SDK documentation.

Publish and subscribe

To receive messages sent to a particular channel, you subscribe to it. When you publish a message to a channel, PubNub delivers that message to everyone subscribed to that channel.

In this app, publishing a message is triggered when the publishSampleMessage() function is called. To subscribe, you send a subscribe() call.

async function publishSampleMessage() {
  console.log(
    "Since we're publishing on subscribe connectEvent, we're sure we'll receive the following publish."
  );
  const result = await pubnub.publish({
    channel: "hello_world",
    message: {
      title: "greeting",
      description: "hello world!",
    },
  });
  console.log(result);
}

pubnub.subscribe({
  channels: ["hello_world"],
});

For more information, refer to the Publish and Subscribe section of the SDK documentation, and to Publishing a Message.

Putting it all together

Your App file should now look similar to the one below:

const PubNub = require("pubnub");

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

async function publishSampleMessage() {
  console.log(
    "Since we're publishing on subscribe connectEvent, we're sure we'll receive the following publish."
  );
  const result = await pubnub.publish({
    channel: "hello_world",
    message: {
      title: "greeting",
      description: "hello world!",
    },
  });
  console.log(result);
}

pubnub.addListener({
  status: function (statusEvent) {
    if (statusEvent.category === "PNConnectedCategory") {
      publishSampleMessage();
    }
  },
  message: function (messageEvent) {
    console.log(messageEvent.message.title);
    console.log(messageEvent.message.description);
  },
  presence: function (presenceEvent) {
    // handle presence
  },
});

console.log("Subscribing..");

pubnub.subscribe({
  channels: ["hello_world"],
});

Now, run your app to see if you did everything correctly. You should see "hello world" printed in the console.

Congratulations! You've just subscribed to a channel and sent your first message.

Walkthrough

Instead of focusing on the order in which you wrote the code, let's focus on the order in which it runs. The app you just created does a few things:

• configures a PubNub connection
• adds the status, message, and presence event listeners
• subscribes to a channel
• publishes a message

Configuring PubNub

The following code is the minimum configuration you need to send and receive messages with PubNub. For more information, refer to the Configuration section of the SDK documentation.

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

Adding event listeners

Listeners help your app react to events and messages. You can implement custom app logic to respond to each type of message or event.

You added three listeners to the app: message, presence, and status. The message listener listens for incoming messages on a particular channel. When it receives a message, the app simply prints the received message. This is why you see "hello world" displayed in the console.

The presence listener reacts to events connected to presence. In this example, it is a no operation listener.

The most noteworthy of listeners in this example is the status listener that triggers the publishing of the "hello world" message when the client successfully subscribes to a channel.

pubnub.addListener({
  status: function (statusEvent) {
    if (statusEvent.category === "PNConnectedCategory") {
      publishSampleMessage();
    }
  },
  message: function (messageEvent) {
    console.log(messageEvent.message.title);
    console.log(messageEvent.message.description);
  },
  presence: function (presenceEvent) {
    // handle presence
  },
});

For more information, refer to the Listeners section of the SDK documentation.

Publishing and subscribing

PubNub uses the Publish/Subscribe model for realtime communication. This model involves two essential parts:

• Channels are transient paths over which your data is transmitted
• Messages contain the data you want to transmit to one or more recipients

When you want to receive messages sent to a particular channel, you subscribe to it. When you publish a message to a channel, PubNub delivers that message to everyone who is subscribed to that channel. In this example, you subscribe to a channel named hello_world.

A message can be any type of JSON-serializable data (such as objects, arrays, integers, strings) that is smaller than 32 KiB. PubNub will, in most cases, deliver your message to its intended recipients in fewer than 100 ms regardless of their location. You can also share files up to 5MB.

When your app successfully connects to a channel, it calls the publishSampleMessage() function, which sends the "hello world" message.

async function publishSampleMessage() {
  console.log(
    "Since we're publishing on subscribe connectEvent, we're sure we'll receive the following publish."
 );
  const result = await pubnub.publish({
    channel: "hello_world",
    message: {
      title: "greeting",
      description: "hello world!",
    },
  });
  console.log(result);
}

You can subscribe to more than one channel with a single subscribe call but in this example, you subscribe to a single channel:

pubnub.subscribe({
  channels: ["hello_world"],
});

For more information, refer to the Publish and Subscribe section of the SDK documentation, and to Publishing a Message.

Next steps

You have just learned how to use the Node.js SDK to send and receive messages using PubNub. Next, take a look at the SDK's reference documentation, which covers PubNub API in more detail.

Get Code:

Get Code: CDN

Get Code: Source

Hello World

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

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

Example

function publish() {

    pubnub = new PubNub({
        publishKey : 'demo',
        subscribeKey : 'demo',
        uuid: "myUniqueUUID"
    })

    function publishSampleMessage() {
        console.log("Since we're publishing on subscribe connectEvent, we're sure we'll receive the following publish.");
        var publishConfig = {
            channel : "hello_world",
            message: {
                title: "greeting",
                description: "hello world!"
            }
        }
        pubnub.publish(publishConfig, function(status, response) {
            console.log(status, response);
        })
    }

    pubnub.addListener({
        status: function(statusEvent) {
            if (statusEvent.category === "PNConnectedCategory") {
                publishSampleMessage();
            }
        },
        message: function(msg) {
            console.log(msg.message.title);
            console.log(msg.message.description);
        },
        presence: function(presenceEvent) {
            // handle presence
        }
    })
    console.log("Subscribing..");
    pubnub.subscribe({
        channels: ['hello_world']
    });
};

Copy and paste examples

Init

Initializing the client

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

Listeners

Adding Listeners

pubnub.addListener({
    message: function(m) {
        // handle message
        var channelName = m.channel; // The channel for which the message belongs
        var channelGroup = m.subscription; // The channel group or wildcard subscription match (if exists)
        var pubTT = m.timetoken; // Publish timetoken
        var msg = m.message; // The Payload
        var publisher = m.publisher; //The Publisher
    },
    presence: function(p) {
        // handle presence
        var action = p.action; // Can be join, leave, state-change or timeout
        var channelName = p.channel; // The channel for which the message belongs
        var occupancy = p.occupancy; // No. of users connected with the channel
        var state = p.state; // User State
        var channelGroup = p.subscription; //  The channel group or wildcard subscription match (if exists)
        var publishTime = p.timestamp; // Publish timetoken
        var timetoken = p.timetoken;  // Current timetoken
        var uuid = p.uuid; // UUIDs of users who are connected with the channel
    },
    signal: function(s) {
        // handle signal
        var channelName = s.channel; // The channel for which the signal belongs
        var channelGroup = s.subscription; // The channel group or wildcard subscription match (if exists)
        var pubTT = s.timetoken; // Publish timetoken
        var msg = s.message; // The Payload
        var publisher = s.publisher; //The Publisher
    },
    status: function(s) {
        var affectedChannelGroups = s.affectedChannelGroups; // The channel groups affected in the operation, of type array.
        var affectedChannels = s.affectedChannels; // The channels affected in the operation, of type array.
        var category = s.category; //Returns PNConnectedCategory
        var operation = s.operation; //Returns PNSubscribeOperation
        var lastTimetoken = s.lastTimetoken; //The last timetoken used in the subscribe request, of type long.
        var currentTimetoken = s.currentTimetoken; //The current timetoken fetched in the subscribe response, which is going to be used in the next request, of type long.
        var subscribedChannels = s.subscribedChannels; //All the current subscribed channels, of type array.
    }
});

Removing Listeners

var existingListener = {
  message: function () {
  },
};

pubnub.removeListener(existingListener);

Listener status events

Time

// assuming an initialized PubNub instance already exists
pubnub.time(function(status, response) {
	if (status.error) {
		// handle error if something went wrong based on the status object
	} else {
		console.log(response.timetoken);
	}
})

Subscribe

Subscribe (listen on) a channel

pubnub.subscribe({
    channels: ['my_channel'],
});

Publish

pubnub.publish(
    {
        message: {
            such: 'object'
        },
        channel: 'ch1',
        sendByPost: false, // true to send via POST
        storeInHistory: false, //override default storage options
        meta: {
            "cool": "meta"
        } // publish extra meta with the request
    },
    function (status, response) {
        // handle status, response
    }
);

Here Now

pubnub.hereNow(
    {
        channels: ["ch1"], 
        channelGroups : ["cg1"],
        includeUUIDs: true,
        includeState: true 
    },
    function (status, response) {
        // handle status, response
    }
);

Presence

pubnub.subscribe({
	channels: ['my_channel'],
	withPresence: true
});

History

pubnub.history(
    {
        channel: 'history_channel',
        count: 100, // how many items to fetch
        stringifiedTimeToken: true, // false is the default
    },
    function (status, response) {
        // handle status, response
    }
);

Unsubscribe

Stop subscribing (listening) to a channel.

pubnub.unsubscribe({
    channels: ['my_channel']
})

Download a copy from:

Into your resources folder of your Titanium App.

Hello World

var PubNub = require('pubnub');

var pubnub = new PubNub({
	subscribeKey: 'YOUR SUBSCRIBE KEY HERE',
	publishKey: 'YOUR PUBLISH KEY HERE'
});

Example

Hello World Example

var PubNub = require('pubnub');

var pubnub = new PubNub({
    subscribeKey: 'YOUR SUBSCRIBE KEY HERE',
    publishKey: 'YOUR PUBLISH KEY HERE'
});

function publishSampleMessage() {
    console.log("Since we're publishing on subscribe connectEvent, we're sure we'll receive the following publish.");
    var publishConfig = {
        channel : "hello_world",
        message : {
            title: "greeting",
            description: "hello world!"
        }
    }
    pubnub.publish(publishConfig, function(status, response) {
        console.log(status, response);
    })
}

pubnub.addListener({
    status: function (st) {
        if (st.category === "PNConnectedCategory") {
            publishSampleMessage();
        }
    },
    message: function (m) {
        console.log(m.message.title);
        console.log(m.message.description);
    },
    presence: function (ps) {
        console.log(ps);
    }
});

pubnub.subscribe({
    channels: ['hello_world']
});

Copy and paste examples

Init

Initializing the client

var pubnub = new PubNub({
    subscribeKey: 'YOUR SUBSCRIBE KEY HERE',
    publishKey: 'YOUR PUBLISH KEY HERE',
    uuid: "myUniqueUUID",
    ssl: true
});

Listeners

Adding Listeners

pubnub.addListener({
    message: function(m) {
        // handle message
        var channelName = m.channel; // The channel for which the message belongs
        var channelGroup = m.subscription; // The channel group or wildcard subscription match (if exists)
        var pubTT = m.timetoken; // Publish timetoken
        var msg = m.message; // The Payload
        var publisher = m.publisher; //The Publisher
    },
    presence: function(p) {
        // handle presence
        var action = p.action; // Can be join, leave, state-change or timeout
        var channelName = p.channel; // The channel for which the message belongs
        var occupancy = p.occupancy; // No. of users connected with the channel
        var state = p.state; // User State
        var channelGroup = p.subscription; //  The channel group or wildcard subscription match (if exists)
        var publishTime = p.timestamp; // Publish timetoken
        var timetoken = p.timetoken;  // Current timetoken
        var uuid = p.uuid; // UUIDs of users who are connected with the channel
    },
    signal: function(s) {
        // handle signal
        var channelName = s.channel; // The channel for which the signal belongs
        var channelGroup = s.subscription; // The channel group or wildcard subscription match (if exists)
        var pubTT = s.timetoken; // Publish timetoken
        var msg = s.message; // The Payload
        var publisher = s.publisher; //The Publisher
    },
    status: function(s) {
        var affectedChannelGroups = s.affectedChannelGroups; // The channel groups affected in the operation, of type array.
        var affectedChannels = s.affectedChannels; // The channels affected in the operation, of type array.
        var category = s.category; //Returns PNConnectedCategory
        var operation = s.operation; //Returns PNSubscribeOperation
        var lastTimetoken = s.lastTimetoken; //The last timetoken used in the subscribe request, of type long.
        var currentTimetoken = s.currentTimetoken; //The current timetoken fetched in the subscribe response, which is going to be used in the next request, of type long.
        var subscribedChannels = s.subscribedChannels; //All the current subscribed channels, of type array.
    }
});

Removing Listeners

var existingListener = {
    message: function() {
    }
}

pubnub.removeListener(existingListener);

Listener status events

Time

pubnub.time(function(status, response) {
    if (status.error) {
        console.log(status.error);
    } else {
        console.log(response.timetoken);
    }
});

Subscribe

Subscribe (listen on) a channel

pubnub.subscribe({
    channels: ['my_channel'],
    withPresence: true
});

Publish

pubnub.publish(
    {
        message: {
            such: 'object'
        },
        channel: 'ch1',
        sendByPost: false, // true to send via POST
        storeInHistory: false, //override default storage options
        meta: {
            "cool": "meta"
        } // publish extra meta with the request
    },
    function (status, response) {
        // handle status, response
    }
);

Here Now

pubnub.hereNow(
    {
        channels: ["my_channel"],
        channelGroups : ["my_channelGroup"],
        includeUUIDs: true,
        includeState: true
    },
    function (status, response) {
        console.log(status);
        console.log(response);
    }
);

Presence

pubnub.addListener({
    presence: function(m) {
        console.log(m);
    },
    message: function(message) {
        console.log(message)
    }
});

pubnub.subscribe({
    channels: ["my_channel"],
    withPresence: true
});

History

pubnub.history(
    {
        channel: 'my_channel',
        count: 100, // 100 is the default
        stringifiedTimeToken: true // false is the default
    },
    function (status, response) {
        console.log(response);
    }
);

Unsubscribe

Stop subscribing (listening) to a channel.

pubnub.unsubscribe({
    channels: ['my_channel']
})

Get Code: Source

Get Code: NPM

Hello World

Example

Hello World Example

<template>
    <div id="app">
        <ol>
            <li v-for="msg in ch1">{{msg.message}}</li>
        </ol>
        <button v-on:click="push">push</button>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                ch1: this.$pnGetMessage('ch1'),
            },
        },
        methods: {
            push() {
                this.$pnPublish({
                    channel: 'ch1',
                    message: Date.now()
                },
                (status, response) => console.log(status, response));
            },
        },
        mounted() {
            this.$pnSubscribe({
				channels: ['ch1']
			});
        },
    };
</script>

How to use PubNubVue

import Vue from 'vue';
import PubNubVue from 'pubnub-vue';
import App from './App';

Vue.use(PubNubVue, {
    subscribeKey: 'YOUR SUBSCRIBE KEY HERE',
    publishKey: 'YOUR PUBLISH KEY HERE'
});

new Vue({
    el: '#app',
    template: '<App/>',
    components: {
        App
    },
});

Events

<template>
    <div id="app">
        <ol>
            <li v-for="msg in ch1">{{ msg.message }}</li>
        </ol>
    </div>
</template>
<script>
    export default {
        name: 'app',
        data() {
            return {
                ch1: this.$pnGetMessage('ch1'),
            },
        },
        mounted() {
            this.$pnSubscribe({
                channels: ['ch1', 'ch2']
            });
        },
    };
</script>

<template>
    <div id="app">
        <ol>
            <li v-for="msg in ch1">{{ msg.message }}</li>
        </ol>
    </div>
</template>
<script>
    export default {
        name: 'app',
        data() {
            return {
                ch1: this.$pnGetMessage('ch1', this.receptor),
            },
        },
        methods: {
            receptor(msg) {
                msg.message = `sent - ${msg.message}`;
            },
        },
        mounted() {
            this.$pnSubscribe({
                channels: ['ch1', 'ch2']
            });
        },
    };
</script>

<template>
    <div id="app">
        <ol>
            <li v-for="msg in ch1">{{ msg.message }}</li>
        </ol>
    </div>
</template>
<script>
    export default {
        name: 'app',
        data() {
            return {
                ch1: this.$pnGetMessage('ch1', null, 10),
            },
        },
        methods: {
            receptor(msg) {
                msg.message = `sent - ${msg.message}`;
            },
        },
        mounted() {
            this.$pnSubscribe({
                channels: ['ch1', 'ch2']
            });
        },
    };
</script>

<template>
    <div id="app">
        <span>occupancy: {{ occupancy }}</span>
    </div>
</template>
<script>
    export default {
        name: 'app',
        data() {
            return {
                occupancy: 0,
            };
        },
        methods: {
            presence(ps) {
                this.occupancy = ps.occupancy;
                console.log(ps);
            },
        },
        mounted() {
            this.$pnSubscribe({
                channels: ['ch1'],
                withPresence: true
            });
            this.$pnGetPresence('ch1', this.presence);
        },
    };
</script>

<template>
    <div id="app">
        <span>category: {{ category }}</span>
    </div>
</template>
<script>
export default {
    name: 'app',
    data() {
        return {
            category: '',
        };
    },
    methods: {
        status(st) {
            console.log(st);
            this.category = st.category;
        },
    },
    mounted() {
        this.$pnSubscribe({
            channels: ['ch1']
        });
        this.$pnGetStatus(this.status);
    },
};
</script>

this.$pnPublish(
    {
        channel: 'ch1',
        message: Date.now()
    },
    (status, response) => console.log(status, response)
);

this.$pnClean('ch1');

this.$pnRelease('ch1');

this.$pnSubscribe({
    channels: ['ch1'],
    autoload: 100
});

this.$pnUnsubscribe({
    channels: ['ch1']
});

const instance = this.$pnGetInstance();

import PubNubVue from 'pubnub-vue';

const instance = PubNubVue.getInstance();

<template>
    <div id="app">
        <ol>
            <li v-for="msg in ch1">{{ msg.message }}</li>
        </ol>
    </div>
</template>
<script>
export default {
    name: 'app',
    data() {
        return {
            ch1: this.$pnGetMessage('ch1', null, 10, 'instance2'),
        };
    },
    mounted() {
        this.$pnSubscribe(
            {
                channels: ['ch1']
            },
            'instance2'
        );
    },
    created() {
        this.$pnGetInstance('instance2');
    },
};
</script>

this.$pnGetMessage(
    'ch1',
    null,
    10,
    'instance2'
)

const instance2 = PubNubVue.getInstance('instance2');

const instance = this.$pnGetInstance('instance2');

Copy and paste examples

Init

Initializing the client

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

Vue.use(PubNubVue, {
    subscribeKey: "mySubscribeKey",
    publishKey: "myPublishKey",
    uuid: "myUniqueUUID",
    ssl: true
});

Listeners

Adding Listeners

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

pubnub.addListener({
    message: function(m) {
        // handle message
        var channelName = m.channel; // The channel for which the message belongs
        var channelGroup = m.subscription; // The channel group or wildcard subscription match (if exists)
        var pubTT = m.timetoken; // Publish timetoken
        var msg = m.message; // The Payload
        var publisher = m.publisher; //The Publisher
    },
    presence: function(p) {
        // handle presence
        var action = p.action; // Can be join, leave, state-change or timeout
        var channelName = p.channel; // The channel for which the message belongs
        var occupancy = p.occupancy; // No. of users connected with the channel
        var state = p.state; // User State
        var channelGroup = p.subscription; //  The channel group or wildcard subscription match (if exists)
        var publishTime = p.timestamp; // Publish timetoken
        var timetoken = p.timetoken;  // Current timetoken
        var uuid = p.uuid; // UUIDs of users who are connected with the channel
    },
    status: function(s) {
        var affectedChannelGroups = s.affectedChannelGroups;
        var affectedChannels = s.affectedChannels;
        var category = s.category;
        var operation = s.operation;
    }
});

Removing Listeners

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

const existingListener = {
    message: function() {
    } 
}
 
pubnub.removeListener(existingListener);

Listener status events

Time

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

pubnub.time(function(status, response) {
    if (status.error) {
        // handle error if something went wrong based on the status object
    } else {
        console.log(response.timetoken);
    }
});

Subscribe

Subscribe (listen on) a channel

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

pubnub.subscribe({ 
	channels: ['my_channel'] 
});

Publish

const pubnub = PubNubVue.getInstance();

pubnub.publish(
    {
        message: {
            such: 'object'
        },
        channel: 'ch1',
        sendByPost: false, // true to send via POST
        storeInHistory: false, //override default storage options
        meta: {
            "cool": "meta"
        } // publish extra meta with the request
    },
    function(status, response) {
        // handle status, response
    }
);

Here Now

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

pubnub.hereNow(
    {
        channels: ["ch1"], 
        channelGroups : ["cg1"],
        includeUUIDs: true,
        includeState: true
    },
    function(status, response) {
        // handle status, response
    }
);

Presence

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

pubnub.subscribe({ 
	channels: ['my_channel'], 
	withPresence: true 
});

History

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

pubnub.history(
    {
        channel: 'history_channel',
        count: 100, // how many items to fetch
        stringifiedTimeToken: true, // false is the default
    },
    function(status, response) {
        // handle status, response
    }
);

Unsubscribe

Stop subscribing (listening) to a channel.

import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();

pubnub.unsubscribe({
    channels: ['my_channel']
});