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,wampIsConnectedandwampIsRetryingare only available on the$rootcomponent, 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:wampauto_reestablish {boolean}: Automatically re-registers and re-subscribes after reconnectionauto_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