Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nigeltiany/vue-socket-cluster
Vue socket cluster wrapper
https://github.com/nigeltiany/vue-socket-cluster
socket-cluster vuejs vuejs2 websockets
Last synced: about 1 month ago
JSON representation
Vue socket cluster wrapper
- Host: GitHub
- URL: https://github.com/nigeltiany/vue-socket-cluster
- Owner: nigeltiany
- Created: 2017-07-11T17:57:14.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-16T04:47:11.000Z (over 6 years ago)
- Last Synced: 2024-09-28T18:01:27.239Z (about 2 months ago)
- Topics: socket-cluster, vuejs, vuejs2, websockets
- Language: JavaScript
- Size: 188 KB
- Stars: 15
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[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
export default {
methods: {
receiveData(data) {
console.log(data)
}
}
}
```
#### default events
```html
export default {
methods: {
connected(){
console.log('connected to echo socket server')
},
anyMessageData(data) {
console.log(data)
}
}
}
```
#### sending data
```html
export default {
data() {
return {
connected: false,
message: null
}
},
methods: {
connected(){
this.connected = true
},
anyMessageData(data) {
console.log(data)
}
}
}
```
#### event data
```html
export default {
methods: {
eventData(data){
console.log(data)
}
}
}
```
#### subscriptions
```html
export default {
methods: {
channelData(data){
console.log(data)
}
}
}
```
Based on works from [MetinSeylan/Vue-Socket.io](https://github.com/MetinSeylan/Vue-Socket.io) and its contributor