vue-wamp

Autobahn wrapper for Vue, served as a plugin

This release only supports VueJS 2, I have no plan to create a VueJS 1 compatible branch, but pull requests are always welcome!

Since v0.0.1:

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 prototype methods
Automatic garbage collection for Registration and Subscription objects component-wise when used through option (acknowledge option is forced)

Since v1.3.0:

Automatic re-subscribe/register if the connection was lost then re-established

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,
    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);
    }
});

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,
                function(args, kwArgs, details) {
                    // do stuff
                }
            }
        },
        register: {
            'some-rpc'(args, kwArgs, details) {
                return args[0] + ' I am useful!';
            },
            'another-rpc': {
                invoke: 'random',
                function(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); 
});

Prototype 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); 
        });
    }
}

Mixin methods

!Deprecated since 1.3.0!

this.$wampSubscribe, this.$wampPublish, this.$wampRegister, this.$wampCall, this.$wampUnsubscribe, this.$wampUnregister

export default {
    mounted() {
        this.$wampSubscribe('some-topic', function(args, kwArgs, details) {
            // context is VueComponent, Subscription will be unsubscribed if component is destroyed
        }, {
            // acknowledge: true // option not needed anymore, it's forced
        }).then(function(s) {
            console.log('AutobahnJS Subscription object: ', s); 
        });
    }
}

fonsecas72/vue-wamp