From a715ee1ae7c1412ff0cfd7a325d53de75dff2a05 Mon Sep 17 00:00:00 2001 From: Leonardo Dominguez Date: Sat, 13 Apr 2019 19:32:19 -0400 Subject: [PATCH 1/4] add: handle more than one namespace --- src/index.js | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 465539e..6ba1c61 100644 --- a/src/index.js +++ b/src/index.js @@ -13,10 +13,11 @@ export default class VueSocketIO { * @param debug * @param options */ - constructor({connection, vuex, debug, options}){ + constructor({connection, vuex, debug, options, useConnectionNamespace}){ Logger.debug = debug; this.io = this.connect(connection, options); + this.useConnectionNamespace = useConnectionNamespace; this.emitter = new Emitter(vuex); this.listener = new Listener(this.io, this.emitter); @@ -28,7 +29,23 @@ export default class VueSocketIO { */ install(Vue){ - Vue.prototype.$socket = this.io; + const namespace = this.io.nsp.replace("/", ""); + + if (this.useConnectionNamespace) { + if (typeof Vue.prototype.$socket === "object") { + Vue.prototype.$socket = { + ...Vue.prototype.$socket, + [namespace]: this.io + }; + } else { + Vue.prototype.$socket = { + [namespace]: this.io + }; + } + } else { + Vue.prototype.$socket = this.io; + } + Vue.prototype.$vueSocketIo = this; Vue.mixin(Mixin); From 2f68c7c9b069bd9e5f2e1f8f47fae6a53c431b78 Mon Sep 17 00:00:00 2001 From: Leonardo Dominguez Date: Tue, 16 Apr 2019 11:05:35 -0400 Subject: [PATCH 2/4] change: move useConnectionNamespace inside options object --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 6ba1c61..cb1824c 100644 --- a/src/index.js +++ b/src/index.js @@ -13,11 +13,11 @@ export default class VueSocketIO { * @param debug * @param options */ - constructor({connection, vuex, debug, options, useConnectionNamespace}){ + constructor({connection, vuex, debug, options}){ Logger.debug = debug; this.io = this.connect(connection, options); - this.useConnectionNamespace = useConnectionNamespace; + this.useConnectionNamespace = (options && options.useConnectionNamespace) || false; this.emitter = new Emitter(vuex); this.listener = new Listener(this.io, this.emitter); From 54a8ff8f8c01f2ffaad07259da49447fdddd446f Mon Sep 17 00:00:00 2001 From: Leonardo Dominguez Date: Tue, 16 Apr 2019 11:25:08 -0400 Subject: [PATCH 3/4] update: readme --- README.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/README.md b/README.md index f8f45c8..e725fe9 100644 --- a/README.md +++ b/README.md @@ -87,6 +87,7 @@ connection|String/Socket.io-client|`null`|Required|Websocket server url or socke vuex.store|Vuex|`null`|Optional|Vuex store instance vuex.actionPrefix|String|`null`|Optional|Prefix for emitting server side vuex actions vuex.mutationPrefix|String |`null`|Optional|Prefix for emitting server side vuex mutations +vuex.options.useConnectionNamespace |Boolean|`false`|Optional|Use more than one connection namespace #### 🌈 Component Level Usage @@ -147,6 +148,41 @@ export default new Vuex.Store({ }) ``` +#### 🏆 Connection Namespace +

When you need to handle more than one namespaced connection, you need to set the `useConnectionNamespace` property of +the options object to true. What this does is telling the plugin that you are going to be using more than one namespaced connection and you want to put every connection in their own `$socket` key.

+ +``` javascript +import Vue from 'vue' +import store from './store' +import App from './App.vue' +import VueSocketIO from 'vue-socket.io' + +Vue.use(new VueSocketIO({ + debug: true, + connection: 'http://metinseylan.com:1992/mynamespace', + vuex: { + store, + options: { + useConnectionNamespace: true + } + }, + options: { path: "/my-app/" } //Optional options +})) + +new Vue({ + router, + store, + render: h => h(App) +}).$mount('#app') +``` + +Then use it like this: + +``` javascript +Vue.$socket.mynamespace.emit('emit_method', data) +``` + ## Stargazers over time [![Stargazers over time](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io.svg)](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io) From 4943c1aca2420cf890b05897950894c1fe2c54a1 Mon Sep 17 00:00:00 2001 From: Leonardo Dominguez Date: Sun, 5 May 2019 01:47:01 -0400 Subject: [PATCH 4/4] add: support namespace listeners in components --- src/index.js | 5 ++++- src/mixin.js | 60 ++++++++++++++++++++++++++++++++++++++++------------ 2 files changed, 50 insertions(+), 15 deletions(-) diff --git a/src/index.js b/src/index.js index cb1824c..262a11d 100644 --- a/src/index.js +++ b/src/index.js @@ -37,16 +37,19 @@ export default class VueSocketIO { ...Vue.prototype.$socket, [namespace]: this.io }; + + Vue.prototype.$vueSocketIo = {...Vue.prototype.$vueSocketIo, [namespace]: this}; } else { Vue.prototype.$socket = { [namespace]: this.io }; + Vue.prototype.$vueSocketIo = { [namespace]: this}; } } else { Vue.prototype.$socket = this.io; + Vue.prototype.$vueSocketIo = this; } - Vue.prototype.$vueSocketIo = this; Vue.mixin(Mixin); Logger.info('Vue-Socket.io plugin enabled'); diff --git a/src/mixin.js b/src/mixin.js index a727dfd..93ae7fe 100644 --- a/src/mixin.js +++ b/src/mixin.js @@ -7,14 +7,21 @@ export default { if(!this.sockets) this.sockets = {}; - this.sockets.subscribe = (event, callback) => { + if (typeof this.$vueSocketIo === 'object') { + for (const namespace of Object.keys(this.$vueSocketIo)) { + this.sockets[namespace] = { + subscribe: (event, callback) => { + this.$vueSocketIo[namespace].emitter.addListener(event, callback, this); + }, + unsubscribe: (event) => { + this.$vueSocketIo[namespace].emitter.removeListener(event, this); + } + } + } + } else { this.$vueSocketIo.emitter.addListener(event, callback, this); - }; - - this.sockets.unsubscribe = (event) => { this.$vueSocketIo.emitter.removeListener(event, this); - }; - + } }, /** @@ -24,14 +31,27 @@ export default { if(this.$options.sockets){ - Object.keys(this.$options.sockets).forEach(event => { + if (typeof this.$vueSocketIo === 'object') { + for (const namespace of Object.keys(this.$vueSocketIo)) { + if (this.$options.sockets[namespace]) { + Object.keys(this.$options.sockets[namespace]).forEach(event => { - if(event !== 'subscribe' && event !== 'unsubscribe') { - this.$vueSocketIo.emitter.addListener(event, this.$options.sockets[event], this); + if(event !== 'subscribe' && event !== 'unsubscribe') { + this.$vueSocketIo[namespace].emitter.addListener(event, this.$options.sockets[namespace][event], this); + } + + }); + } } + } else { + Object.keys(this.$options.sockets).forEach(event => { - }); - + if(event !== 'subscribe' && event !== 'unsubscribe') { + this.$vueSocketIo.emitter.addListener(event, this.$options.sockets[event], this); + } + + }); + } } }, @@ -43,11 +63,23 @@ export default { if(this.$options.sockets){ - Object.keys(this.$options.sockets).forEach(event => { + if (typeof this.$vueSocketIo === 'object') { + for (const namespace of Object.keys(this.$vueSocketIo)) { + if (this.$options.sockets[namespace]) { + Object.keys(this.$options.sockets[namespace]).forEach(event => { - this.$vueSocketIo.emitter.removeListener(event, this); + this.$vueSocketIo[namespace].emitter.removeListener(event, this); + + }); + } + } + } else { + Object.keys(this.$options.sockets).forEach(event => { - }); + this.$vueSocketIo.emitter.removeListener(event, this); + + }); + } }