Skip to content

lajosbencz/vue-wamp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Feb 25, 2020
95a436a · Feb 25, 2020
Feb 6, 2020
Feb 7, 2020
Feb 5, 2020
Feb 6, 2020
Feb 5, 2020
Feb 5, 2020
Feb 5, 2020
Feb 6, 2020
Feb 6, 2020
Feb 4, 2017
Feb 6, 2020
Feb 5, 2020
Feb 25, 2020
Feb 25, 2020

Repository files navigation

vue-wamp

Autobahn wrapper for Vue, served as a plugin

  • Calls to subscribe, register, publish, call, unsubscribe, unregister are deferred, so that they are executed as soon as the Session object of Autobahn is available
  • Plugin packaging
  • Global, static methods
  • Vue mixin methods
  • Automatic garbage collection for Registration and Subscription objects component-wise when used through option (acknowledge option is forced)

Since v2.0.0:

  • Automatic re-subscribe/register if the connection was lost then re-established (only works with mixin methods and component config)
  • Reactive global state
  • Events

Since v3.0.0:

  • wampIsOpen, wampIsConnected and wampIsRetrying are only available on the $root component, to avoid data pollution. (Events are still emitted on all components)
  • Scrapped bundling, use your own toolchain to transpile to the desired compatibility level
  • Deprecated config options:
    • onopen {function}
    • onclose {function}
    • debug {boolean}
  • New config options:
    • namespace {string}: The namespace for the plugin, default: wamp
    • auto_reestablish {boolean}: Automatically re-registers and re-subscribes after reconnection
    • auto_close_timeout {number}: Will close the WS connection after amount of idle milliseconds
  • Rudimentary TypeScript support

Installation

npm install --save vue-wamp

Configuration

// entry.js
import VueWamp from 'vue-wamp'

Vue.use(VueWamp, {
    url: 'ws://demo.crossbar.io/ws',
    realm: 'realm1',

    // change this in case of naming conflict
    namespace: 'wamp',
    // automatically re-registers and re-subscribes after reconnection (on by default)
    auto_reestablish: true,
    // automatically closes WS connection after amount of idle milliseconds (off by default)
    auto_close_timeout: -1,
});

Global status

<template>
    <div>
        <span v-if="$root.wampIsOpen">Connected</span>
        <span v-else-if="$root.wampIsRetrying">Retrying...</span>
        <span v-else>Disconnected</span>    
    </div>
</template>

Events

export default {
  mounted() {
    this.$on('$wamp.status', ({status, lastStatus, details}) => {});
    this.$on('$wamp.opened', ({status, lastStatus, details}) => {});
    this.$on('$wamp.closed', ({status, lastStatus, details}) => {});
    this.$on('$wamp.retrying', ({status, lastStatus, details}) => {});
    this.$on('$wamp.reconnected', ({status, lastStatus, details}) => {});
  },
}

Usage

// component.vue
<template>
    <div></div>
</template>
<script>
export default {
    data() {
        return {
            someValue: 'foobar'
        };
    },
    watch: {
        someValue(val, old) {
            this.$wamp.publish('some-topic', [], {val, old});
        }
    },
    wamp: {
        subscribe: {
            'some-topic'(args, kwArgs, details) {
                this.someValue = kwArgs.val;
            },
            'another-topic': {
                acknowledge: true,
                handler(args, kwArgs, details) {
                    // do stuff
                }
            }
        },
        register: {
            'some-rpc'(args, kwArgs, details) {
                return args[0] + ' I am useful!';
            },
            'another-rpc': {
                invoke: 'random',
                handler(args, kwArgs, details) {
                    // more stuff
                }
            }
        }
    }
}
</script>

Static methods

Vue.$wamp.subscribe, Vue.$wamp.publish, Vue.$wamp.register, Vue.$wamp.call, Vue.$wamp.unsubscribe, Vue.$wamp.unregister

// main.js
Vue.$wamp.subscribe('some-topic', function(args, kwArgs, details) {
        // context is empty
        console.log(this); // = null
    }, {
    acknowledge: true // option needed for promise
}).then(function(s) {
    console.log('AutobahnJS Subscription object: ', s); 
});

Mixin methods

this.$wamp.subscribe, this.$wamp.publish, this.$wamp.register, this.$wamp.call, this.$wamp.unsubscribe, this.$wamp.unregister

export default {
    data() {
      return {
        foo: 'bar',
      };
    },
    mounted() {
        this.$wamp.subscribe('some-topic', function(args, kwArgs, details) {
            // component context is available
            return this.foo;
        }, {
            acknowledge: true // option needed for promise, automatically added
        }).then(function(s) {
            console.log('AutobahnJS Subscription object: ', s); 
        });
    }
}

Todo

  • Example
  • Tests
  • Vuex integration
  • Re-authentication