JavaScriptWebWebNode.jsPhoneGapReactTitaniumVueJavaScript V4 SDK 4.27.1Node.js V4 SDK 4.27.1PhoneGap V4 SDK 4.27.1React V4 SDK 1.3.1Titanium V4 SDK 4.27.1Vue V4 SDK 1.0.1

Get Code:

Get Code: Source

Hello World

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

var PubNub = require('pubnub')

Example

function publish() {
  
    pubnub = new PubNub({
        publishKey : 'demo',
        subscribeKey : 'demo'
    })
      
    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

// PubNub = require('pubnub'); 		ES5
import PubNub from 'pubnub';		ES6

var pubnub = new PubNub({
	subscribeKey: "mySubscribeKey",
	publishKey: "myPublishKey",
	secretKey: "secretKey",
	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
    },
    user: function(userEvent) {
        // for Objects, this will trigger when:
        // . user updated
        // . user deleted
    },
    space: function(spaceEvent) {
        // for Objects, this will trigger when:
        // . space updated
        // . space deleted
    },
    membership: function(membershipEvent) {
        // for Objects, this will trigger when:
        // . user added to a space
        // . user removed from a space
        // . membership updated on a space
    },
    messageAction: function(ma) {
        // handle message action
        var channelName = ma.channel; // The channel for which the message belongs
        var publisher = ma.publisher; //The Publisher
        var event = ma.message.event; // message action added or removed
        var type = ma.message.data.type; // message action type
        var value = ma.message.data.value; // message action value
        var messageTimetoken = ma.message.data.messageTimetoken; // The timetoken of the original message
        var actionTimetoken = ma.message.data.actionTimetoken; //The timetoken of the message action
    },
    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)

listeners 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']
})

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.27.1.js"></script>

Example

function publish() {
  
    pubnub = new PubNub({
        publishKey : 'demo',
        subscribeKey : 'demo'
    })
      
    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",
	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)

listeners 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']
})

Get Code: Source

Get Code: NPM

Hello World

Example

Hello World Example

Hello World Example using React

import React, { Component } from 'react';
import PubNubReact from 'pubnub-react';

export default class extends Component {
    constructor(props) {
        super(props);
        this.pubnub = new PubNubReact({
            publishKey: 'YOUR PUBLISH KEY',
            subscribeKey: 'YOUR SUBSCRIBE KEY'
        });
        this.pubnub.init(this);
    }

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

        this.pubnub.getMessage('channel1', (msg) => {
            console.log(msg);
        });

        this.pubnub.getStatus((st) => {
            this.pubnub.publish({
                message: 'hello world from react',
                channel: 'channel1'
            });
        });
    }

    componentWillUnmount() {
        this.pubnub.unsubscribe({
            channels: ['channel1']
        });
    }

    render() {
        const messages = this.pubnub.getMessage('channel1');
        return (
            <div>
                <ul>
                    {messages.map((m, index) => <li key={'message' + index}>{m.message}</li>)}
                </ul>
            </div>
        );
    }
}

Hello World Example using React Native

import React, { Component } from 'react';
import PubNubReact from 'pubnub-react';

export default class extends Component {
    constructor(props) {
        super(props);
        this.pubnub = new PubNubReact({
            publishKey: 'YOUR PUBLISH KEY',
            subscribeKey: 'YOUR SUBSCRIBE KEY'
        });
        this.pubnub.init(this);
    }

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

        this.pubnub.getMessage('channel1', (msg) => {
            console.log(msg);
        });

        this.pubnub.getStatus((st) => {
            this.pubnub.publish({
                message: 'hello world from react',
                channel: 'channel1'
            });
        });
    }

    componentWillUnmount() {
        this.pubnub.unsubscribe({
            channels: ['channel1']
        });
    }

    render() {
        const messages = this.pubnub.getMessage('channel1');
        return (
            <View>
                {messages.map((m, index) => <Text key={'message' + index}>{m.message}</Text>)}
            </View>
        );
    }
}

How to use PubNubReact

    import PubNubReact from 'pubnub-react';
    

    constructor(props) {
        super(props);
        this.pubnub = new PubNubReact({
            publishKey: 'YOUR PUBLISH KEY',
            subscribeKey: 'YOUR SUBSCRIBE KEY'
        });
        this.pubnub.init(this);
    }
    

    componentWillMount() {
        this.pubnub.subscribe({
            channels: ['channel1']
        });
  
        this.pubnub.getMessage('channel1', (msg) => {
            console.log(msg);
        });
    }
    

Events

    this.pubnub.getStatus();

    this.pubnub.getMessage('channel1');
    this.pubnub.getMessage('channel2');
    this.pubnub.getMessage('channelGroup1');

    this.pubnub.getPresence('channel1');
    this.pubnub.getPresence('channel2');
    

    ...

    componentWillMount() {
        this.pubnub.getMessage('channel1');

        ...
    }

    render() {
        const messages = this.pubnub.getMessage('channel1');
        return (
            <div>
                <ul>
                    {messages.map((m, index) => <li key={'message' + index}>{m.message}</li>)}
                </ul>
            </div>
        );
    }

    ...
    

    ...

    componentWillMount() {
        this.pubnub.getMessage('channel1');

        ...
    }

    render() {
        const messages = this.pubnub.getMessage('channel1');
        return (
            <View>
                {messages.map((m) => <Text>{m.message}</Text>)}
            </View>
        );
    }

    ...
    

    this.pubnub.getMessage('channel1', (msg) => {
        console.log(msg);
    });
    

    this.pubnub.getMessage('channel1', (msg) => {
        console.log(msg);
    }, 20);

    this.pubnub.getMessage('channel2', 30);
    

    ...

    componentWillMount() {
        this.pubnub.getPresence('channel1', (presence) => {
            console.log(presence);
        });

        ...
    }

    render() {
      const presence = this.pubnub.getPresence('channel1');
      return (
        <div>
            <p>{presence.action}</p>
        </div>
      );
    }

    ...
    

    ...

    componentWillMount() {
        this.pubnub.getPresence('channel1', (presence) => {
            console.log(presence);
        });

    ...
    }

    render() {
        const presence = this.pubnub.getPresence('channel1');
        return (
            <View>
                <Text>{presence.action}</Text>
            </View>
        );
    }

    ...
    

    ...

    componentWillMount() {
        this.pubnub.getStatus((status) => {
            console.log(status);
        });

    ...
    }

    render() {
        const status = this.pubnub.getStatus();
        return (
            <div>
                <p>{status.category}</p>
            </div>
        );
    }

    ...
    

    ...

    componentWillMount() {
        this.pubnub.getStatus((status) => {
            console.log(status);
        });

    ...
    }

    render() {
        const status = this.pubnub.getStatus();
        return (
            <View>
                <Text>{status.category}</Text>
            </View>
        );
    }

    ...
    

    this.pubnub.clean('myChannel1');

    this.pubnub.clean('myGroup1');
    

    this.pubnub.release('myChannel1');

    this.pubnub.release('myGroup1');

    this.pubnub.release(['myChannel1', 'myChannel2']);
    

    this.pubnub.subscribe({
        channels: ['myChannel1'],
        triggerEvents: true,
        withPresence: true,
        autoload: 100
    });

    let messages = this.pubnub.getMessage('myChannel1', () => {
        console.log(messages);
    });
    

Copy and paste examples

Init

Initializing the client

this.pubnub = new PubNubReact({
    publishKey: 'YOUR PUBLISH KEY',
    subscribeKey: 'YOUR SUBSCRIBE KEY',
    ssl: true 
});

Listeners

Adding Listeners

this.pubnub.addListener({
    status: (st) => {
        if (st.category === "PNUnknownCategory") {
            var newState = {new: 'error'};
            pubnub.setState(
                {
                    state: newState
                },
                function (status) {
                    console.log(st.errorData.message);
                }
            );
        }
    },
    message: (message) => {
        console.log(message);
    }
});

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

Removing Listeners

var existingListener = {
    message: function() {
    } 
}
 
this.pubnub.removeListener(existingListener)

listeners status events

Time

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

Subscribe

Subscribe (listen on) a channel

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

Publish

this.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
    },
    (status, response) => {
        // handle status, response
    }
);

Here Now

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

Presence

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

History

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

Unsubscribe

Stop subscribing (listening) to a channel.

this.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',
    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);

listeners 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",
    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);

listeners 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']
});