Vue-spacebro-client

spacebro-client implementation for Vuejs 2 and Vuex

Install

npm install vue-spacebro-client --save

Usage

Configuration

Automatic spacebro connection from a config object

import VueSpacebroClient from 'vue-spacebro-client'
Vue.use(VueSpacebroClient, {
  host: 'spacebro.space',
  port: 3333,
  channelName: 'media-stream'
  client: {
    name: 'vue-example',
    description: 'exemple app',
    in: {
      inMedia: {
        eventName: 'inMedia',
        description: 'Input media',
        type: 'all'
      }
    },
    out: {
      outMedia: {
        eventName: 'outMedia',
        description: 'Output media',
        type: 'all'
      }
    }
  }
})

Enable Vuex integration

import store from './yourstore'
Vue.use(VueSpacebroClient, config, store));

On Vuejs instance usage

var vm = new Vue({
  spacebroEvents: {
    connect: function () {
      console.log('spacebro connected')
    },
    inMedia: function (val) {
      console.log('this method was fired by a message on spacebro. eg: spacebro.emit("newMedia", data)')
    }
  },
  methods: {
    clickButton: function(val){
        // $spacebro is spacebro-client instance
        this.$spacebro.emit(this.$spacebro.config.client.out.outMedia.eventName, val);
    }
  }
})

Dynamic spacebro event listeners

Create a new listener

this.$options.spacebroEvents.event_name = (data) => {
    console.log(data)
}

Remove existing listener

delete this.$options.spacebroEvents.event_name;

Vuex Store integration

spacebro mutations always have SPACEBRO_ prefix.

spacebro actions always have spacebro_ prefix and the spacebro event name is camelCased (ex. SPACEBRO_USER_MESSAGE => spacebro_userMessage)

You can use either one or another or both in your store. Namespaced modules are supported.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        connect: false,
        message: null
    },
    mutations:{
        SPACEBRO_CONNECT: (state,  status ) => {
            state.connect = true;
        },
        SPACEBRO_USER_MESSAGE: (state,  message) => {
            state.message = message;
        }
    },
    actions: {
        otherAction: (context, type) => {
            return true;
        },
        spacebro_userMessage: (context, message) => {
            context.dispatch('newMessage', message);
            context.commit('NEW_MESSAGE_RECEIVED', message);
            if (message.is_important) {
                context.dispatch('alertImportantMessage', message);
            }
            ...
        }
    }
})

Example

There is an example in electron-vue
To generate an example, do

npm install -g vue-cli
vue init soixantecircuits/electron-vue simple-electron-vue-spacebro

And select option to add spacebro-client in project.

Credits

This is largely based on MetinSeylan's awesome Vue-Socket.io