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
andwampIsRetrying
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 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 Vue;
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
{ this; this; this; this; this; }
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.jsVue$wamp;
Mixin methods
this.$wamp.subscribe
, this.$wamp.publish
, this.$wamp.register
, this.$wamp.call
, this.$wamp.unsubscribe
, this.$wamp.unregister
{ return foo: 'bar' ; } { this$wamp; }
Todo
- Example
- Tests
- Vuex integration
- Re-authentication