pubnub-vue
v1.0.1
Published
Publish & Subscribe Real-time Messaging with PubNub
Downloads
598
Maintainers
Readme
PubNub Vue
Welcome! We're here to get you started quickly with your integration between PubNub and Vue. PubNub makes it easy to integrate real-time bidirectional communication into your app.
Pubnub Vue is a wrapper of PubNub JavaScript SDK version 4 that adds a few of extra features to simplify the integration with Vue:
You can still use the native PubNub JavaScript SDK if you feel this will be more suitable for your situation.
Communication
- If you need help or have a general question, contact [email protected]
- If you want to contribute, please open a pull request against the
develop
branch.
Install PubNub Vue SDK
npm install pubnub-vue
How to use PubNubVue
In order to get the integration between your Vue's application and PubNub, PubNubVue must be installed like a plugin
PubNubVue must be installed like a plugin.
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 },
});
Where subscribe
Use the hook mounted to subscribe channels using $pnSubscribe method
export default {
name: 'app',
mounted() {
this.$pnSubscribe({ channels: ['ch1', 'ch2'], withPresence: true });
},
};
How render real time messages directly into the IU
$pnGetMessage is the most easy way of connecting real time message directly in the UI.
<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'], withPresence: true });
},
};
</script>
How to catch each message
pnGetMessage will receive a second parameter which is a callback function that is going to be invoked as soon as received a new real time message. This will allow to apply a transformation or manipulate of somehow to each message or implement a custom mechanism to render these.
<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'], withPresence: true });
},
};
</script>
How to publish a message
<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', this.receptor),
},
},
methods: {
receptor(msg) {
msg.message = `sent - ${msg.message}`;
},
push() {
this.$pnPublish({ channel: 'ch1', message: Date.now() }, (status, response) => console.log(status, response));
},
},
mounted() {
this.$pnSubscribe({ channels: ['ch1', 'ch2'], withPresence: true });
},
};
</script>
How to get the status
<template>
<div id="app">
{{ category }}
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
category: '',
},
},
methods: {
status(st) {
this.category = st.category;
},
},
mounted() {
this.$pnSubscribe({ channels: ['ch1', 'ch2'], withPresence: true });
},
};
</script>
How to get presence messages
<template>
<div id="app">
...
</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', 'ch2'], withPresence: true });
this.$pnGetPresence('ch1', this.presence);
},
};
</script>
How to unsubscribe a channel
this.$pnUnsubscribe({ channels: ['ch1'] });
How to clean the stack of messages
this.$pnClean('ch1');
How to stop of receiving real time messages
this.$pnRelease('ch1');
How to access to the original instance
If somehow is neccesary to access to the instance in order to get using all feature given for javascript SDK.
let instance = this.$pnGetInstance();
import PubNubVue from 'pubnub-vue';
const instance = PubNubVue.getInstance();
const instance2 = PubNubVue.getInstance('instance2');
How to get a new instance
The $pnGetInstance method will return the main instance which be created by default but if we need to create an additional instance, we can pass as a parameter the name of a new one instance and with this same name, you will have the capability of retrieving from other component inside of our application.
<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>