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);
});
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent