WAMP protocol wrapper library for Vue
npm install vue-wampwampIsOpen`, `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
`js
// 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
`vue
Connected
Retrying...
Disconnected
`
Events
`js
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
`vue
// component.vue
`
Static methods
`Vue.$wamp.subscribe`, `Vue.$wamp.publish`, `Vue.$wamp.register`, `Vue.$wamp.call`, `Vue.$wamp.unsubscribe`, `Vue.$wamp.unregister`
`js
// 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`
`js
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);
});
}
}
``