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

Installation

npm install --save vue-wamp

Example

cd node_modules/vue-wamp
npm run example

You will need to run two browser tabs to see the effects of example 1&2 (or more testers). WAMP router by courtesy of https://demo.crossbar.io/ws, please obey their rules .

Lately the demo router was unavailable, so i changed to config to connect to a local crossbar server instead.

Configuration

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

Vue.use(VueWamp, {
    debug: true, // Logs will be written to the console
    url: 'ws://demo.crossbar.io/ws',
    realm: 'realm1',
    onopen: function(session, details) {
        console.log('WAMP connected', session, details);
    },
    onclose: function(reason, details) {
        console.log('WAMP closed: ' + reason, details);
    }
});

Global status

<template>
    <div>
        <span v-if="wampIsOpen">Connected</span>
        <span v-else-if="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

• Tests
• Improve on src
• Improve on builder