@fastybird/vue-wamp-v1

WAMPv1 websockets communication for VUE app

Usage no npm install needed!

<script type="module">
  import fastybirdVueWampV1 from 'https://cdn.skypack.dev/@fastybird/vue-wamp-v1';
</script>

README

FastyBird WAMPv1 websocket client library

Build Status Latest stable Downloads total Licence Types

What is FastyBird WAMPv1 websocket client library?

This library is very simple implementation of WAMP in version 1 for Vue framework.

Installation

The best way to install @fastybird/vue-wamp-v1 is using Yarn:

yarn add @fastybird/vue-wamp-v1

or if you prefer npm:

npm install @fastybird/vue-wamp-v1

Setup in your application

Register Vue plugin:

import Vue from 'vue'
import VueWamp from '@fastybird/vue-wamp-v1'

Vue.use(VueWamp, {
    wsuri: 'ws://your.socker.server.com:1234'
})

Options:

  • wsuri - is required option and with this field is representing your wamp server address
  • namespace - default value is wamp and this option represent plugin name in you vue instance
  • debug - default is false and this option is to enable or disable console log of wamp events

Usage

In you component you could establish connection and subscribe to wamp events:

new Vue({
    mounted(): {
        this.$wamp.open() // Establish connection with server

        this.$wamp.subscribe(
          '/topic/path',
          (data) => {
            console.log(data) // Data sent by server to the topic
          },
        )
    },
    destroyed(): {
      this.$wamp.close() // Close opened connection with server
    },
    methods: {
        clickButton: (data) => {
            // Publish to specific topic
            this.$wamp.publish('/topic/path', 'Hello world')
        },

        clickOtherButton: (data) => {
            // RPC
            this.$wamp.call('/topic/path', 'Hello world')
                .then(() => {
                  console.log('Call was successful')
                })
                .catch(() => {
                    console.log('Something went wrong')
                })
        },
    }
})

Typescript setup

Add the types to your "types" array in tsconfig.json.

{
  "compilerOptions": {
    "types": [
      "@fastybird/vue-wamp-v1"
    ]
  }
}

Nuxt support

This module has also support for Nuxt as a module. It could be installed via nuxt.config.js/ts

export default {

  modules: [
      '@fastybird/vue-wamp-v1/@nuxt',
  ],

}

Homepage https://www.fastybird.com and repository https://github.com/FastyBird/vue-wamp-v1.