Skip to content

Latest commit

 

History

History
471 lines (416 loc) · 8.9 KB

README.md

File metadata and controls

471 lines (416 loc) · 8.9 KB
Raw

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.

For more information, visit our docs page.

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.

Parameter Type Required Defaults Description
channel String Yes Channel which will be listened.
callback Function Optional Function which will be invoked as soon as received a new real time message.
keepMessage Number Optional Number of messages which are kept and rendered.
instanceName String Optional 'default' Instance to use into the component. 
<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

Parameter Type Required Defaults Description
args Object Yes A hash of arguments to make the unsubscription.
callback Function Optional Function which will be invoked after publishing the message.
instanceName String Optional 'default' Instance to use into the component. 
<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

Parameter Type Required Defaults Description
callback Function Optional Function which will be invoked as soon as a new change in the network.
instanceName String Optional 'default' Instance to use into the component. 
<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

Parameter Type Required Defaults Description
channel String Yes Channel which will be listened.
callback Function Optional Function which will be invoked as soon as a new presence message is invoked.
instanceName String Optional 'default' Instance to use into the component. 
<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

Parameter Type Required Defaults Description
args Object Yes A hash of arguments to make the unsubscription.
instanceName String Optional 'default' Instance to use into the component. 
this.$pnUnsubscribe({ channels: ['ch1'] });

How to clean the stack of messages

Parameter Type Required Defaults Description
channel String Yes Channel which will be cleaned.
instanceName String Optional 'default' Instance to use into the component. 
this.$pnClean('ch1');

How to stop of receiving real time messages

Parameter Type Required Defaults Description
channel String Yes Channel which will be released.
instanceName String Optional 'default' Instance to use into the component. 
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>