Socket cluster implementation for Vuejs 2 leveraging uws
npm install vue-socket-cluster --saveimport 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
}]
})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;<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><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><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><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><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
Forked from nigeltiany/vue-socket-cluster and corrected
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent