Vue Wamp v2

[douglasgalico]

Component for Wamp v2 (Web Application Messaging Protocol) that handles publish, subscribe and RPC calls (call and offer).

Maybe an AutobahnJS Wrapper?

[simplesmiler]

I don't think this should be a component, but rather a plugin that allows other components to interact with WAMP.

Possible API:

var VueWamp = require('...');
Vue.use(VueWamp);

new Vue({
  wamp: new VueWamp({ <wamp_options> }),
});

module.exports = {
  template: `
    <div>
      <ul>
        <li v-for="message in messages" track-by="id">{{ message.text }}</li>
      </ul>
      <form @submit="submit">
        <input v-model="message">
        <button type="submit">Send</button>
      </form>
    </div>
  `,
  data: function() {
    return {
      message: '',
      messages: [],
    };
  },
  wamp: {
    subscribe: {
      'chat-message': function(message) {
        this.messages.push({ id: cuid(), text: message });
      },
    },
    register: {
      'method.endpoint': function(paload) {
        return this.$wamp.call('method.delegate', payload);
      },
    },
  },
  methods: {
    submit: function() {
      this.$wamp.publish('chat-message', this.message);
      this.message = '';
    },
  },
};

Things to be aware of:

• register acquires a resource, so multiple instances of such component can not be created.
• WAMP is missing some QoS options (reconnect, persistent session, guaranteed delivery), so these will have to be dealt with in the VueWamp instance and in the broker if required.

[lajosbencz]

I've put together an AutobahnJS plugin for Vue2: https://github.com/lajosbencz/vue-wamp

It's not mature in any way, so feedback is welcome! :]