nigeltiany/vue-socket-cluster

Vue socket cluster wrapper

Socket cluster implementation for Vuejs 2 leveraging uws

Socket cluster documentation

Install

npm install vue-socket-cluster --save

Usage

Configuration

import VueSocketCluster from 'vue-socket-cluster';
Vue.use(VueSocketCluster, {
      connections: [{
            name: 'echo', // Each connection object must have a name and the name must be unique in the array
            hostname: '127.0.0.1',
            secure: false,
            port: 8000,
            rejectUnauthorized: false
            // Other socket cluster options
      }]
})

On Vuejs instance usage

add a property connection_name+Events to listen to connection events

var vm = new Vue({
      echoEvents:{
            connect: function(){
                console.log('socket connected')
            },
            echo: function(data){
                console.log(data)
            },
            // Other default events such as ['error','connect','disconnect','connectAbort','connecting', ...] as written on the documentation
            error () {
                //An error occurred on the connection name echo
            },
            connecting () {

            },
            // ...
            // for hyphen separated events such as 'custom-error' use ...
            customError () {

            }
      },
      methods: {
            //triggerInstance object = ```connection_name+Client```
            triggerEvent (name, data) {
                this.$echoClient.emit('name', data);
            }
      }
})

Remove existing listener on client

delete this.$options.$echoClient.event_name;

Alternative Usage

<template>
<!--every connection gets a dynamic component
    use <[client-name]-client></[client-name]-client>
    -->
    <echo-client event="echo" :onData="receiveData"></echo-client>
</template>
<script>

  export default {
      methods: {
          receiveData(data) {
              console.log(data)
          }
      }
  }
</script>

default events

<template>
    <!-- bind documented events using :on['Event_name'] first letter being a capital letter -->
    <echo-client event="echo" :onConnect="connected" :onMessage="anyMessageData"></echo-client>
</template>
<script>

  export default {
      methods: {
          connected(){
              console.log('connected to echo socket server')
          },
          anyMessageData(data) {
              console.log(data)
          }
      }
  }
</script>

sending data

<template>
    <!-- send data by changing the data property -->
    <echo-client :onConnect="connected" :data="message"></echo-client>
    <input :value="message" :disabled="!connected">
</template>
<script>

  export default {
      data() {
          return {
              connected: false,
              message: null
          }  
      },
      methods: {
          connected(){
              this.connected = true
          },
          anyMessageData(data) {
              console.log(data)
          }
      }
  }
</script>

event data

<template>
    <!-- set the event attribute to the event name -->
    <echo-client event="eventName" :onData="eventData"></echo-client>
</template>
<script>

  export default {
      methods: {
          eventData(data){
             console.log(data)
          }
      }
  }
</script>

subscriptions

<template>

    <!-- set the channel attribute to the channel name -->
    <echo-client channel="channelName" :onData="channelData"></echo-client>
</template>
<script>
  export default {
      methods: {
          channelData(data){
             console.log(data)
          }
      }
  }
</script>

Based on works from MetinSeylan/Vue-Socket.io and its contributor