vue-socket-cluster

KO | EN

gitlite — search

#ai #golang #go #machine-learning #rust #linux #java #awesome #cli #vue #pytorch #mcp #ios #open-source

vue-socket-cluster

(★ 14)

Vue socket cluster wrapper

vue-socket-cluster Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[Socket cluster](http://socketcluster.io/#!/) implementation for Vuejs 2 leveraging uws

[Socket cluster documentation](http://socketcluster.io/#!/docs)

## Install

``` bash
npm install vue-socket-cluster --save
```

## Usage
#### Configuration
``` js
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
``` js
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
``` js
delete this.$options.$echoClient.event_name;
```
## Alternative Usage

```html
<template>

    <echo-client event="echo" :onData="receiveData"></echo-client>
</template>
<script>

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

```html
<template>
    
    <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

```html
<template>
    
    <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

```html
<template>
    
    <echo-client event="eventName" :onData="eventData"></echo-client>
</template>
<script>

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

#### subscriptions

```html
<template>

<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](https://github.com/MetinSeylan/Vue-Socket.io) and its contributor

vue-socket-cluster

vue-socket-cluster Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

vue-socket-cluster

vue-socket-cluster Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README