Nutritious Polygonal Meatball

    pubnub-vue

    1.0.1 • Public • Published

    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 support@pubnub.com
    • 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>
    

    Install

    npm i pubnub-vue

    DownloadsWeekly Downloads

    193

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    301 kB

    Total Files

    52

    Last publish

    Collaborators

    • madisonsmith