Skip to content

Commit 8988085

Browse files
focuxMetinSeylan
focux
authored and
MetinSeylan
committed
Handle more than one namespace (MetinSeylan#207)
* add: handle more than one namespace * Revert "[FIX] Adjusting SocketIO client lib import (MetinSeylan#202)" This reverts commit ee1e7ed. * add: handle more than one namespace * change: move useConnectionNamespace inside options object * update: readme * add: support namespace listeners in components * update build files * add: namespace name property to options object * update build files
1 parent ee1e7ed commit 8988085

File tree

4 files changed

+130
-53
lines changed

4 files changed

+130
-53
lines changed

‎README.md

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ new Vue({
5757
import Vue from 'vue'
5858
import store from './store'
5959
import App from './App.vue'
60-
import SocketIO from 'socket.io-client';
6160
import VueSocketIO from 'vue-socket.io'
6261

6362
const options = { path: '/my-app/' }; //Options object to pass into SocketIO
@@ -87,6 +86,7 @@ connection|String/Socket.io-client|`null`|Required|Websocket server url or socke
8786
vuex.store|Vuex|`null`|Optional|Vuex store instance
8887
vuex.actionPrefix|String|`null`|Optional|Prefix for emitting server side vuex actions
8988
vuex.mutationPrefix|String |`null`|Optional|Prefix for emitting server side vuex mutations
89+
vuex.options.useConnectionNamespace |Boolean|`false`|Optional|Use more than one connection namespace
9090

9191
#### 🌈 Component Level Usage
9292

@@ -147,6 +147,41 @@ export default new Vuex.Store({
147147
})
148148
```
149149

150+
#### 🏆 Connection Namespace
151+
<p>When you need to handle more than one namespaced connection, you need to set the `useConnectionNamespace` property of
152+
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.</p>
153+
154+
``` javascript
155+
import Vue from 'vue'
156+
import store from './store'
157+
import App from './App.vue'
158+
import VueSocketIO from 'vue-socket.io'
159+
160+
Vue.use(new VueSocketIO({
161+
debug: true,
162+
connection: 'http://metinseylan.com:1992/mynamespace',
163+
vuex: {
164+
store,
165+
options: {
166+
useConnectionNamespace: true
167+
}
168+
},
169+
options: { path: "/my-app/" } //Optional options
170+
}))
171+
172+
new Vue({
173+
router,
174+
store,
175+
render: h => h(App)
176+
}).$mount('#app')
177+
```
178+
179+
Then use it like this:
180+
181+
``` javascript
182+
Vue.$socket.mynamespace.emit('emit_method', data)
183+
```
184+
150185
## Stargazers over time
151186

152187
[![Stargazers over time](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io.svg)](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io)

‎dist/vue-socketio.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/index.js

Lines changed: 44 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import Mixin from './mixin';
2-
import Logger from './logger';
3-
import Listener from './listener';
4-
import Emitter from './emitter';
5-
import SocketIO from 'socket.io-client';
1+
import Mixin from "./mixin";
2+
import Logger from "./logger";
3+
import Listener from "./listener";
4+
import Emitter from "./emitter";
5+
import SocketIO from "socket.io-client";
66

77
export default class VueSocketIO {
88

@@ -17,6 +17,8 @@ export default class VueSocketIO {
1717

1818
Logger.debug = debug;
1919
this.io = this.connect(connection, options);
20+
this.useConnectionNamespace = (options && options.useConnectionNamespace);
21+
this.namespaceName = (options && options.namespaceName);
2022
this.emitter = new Emitter(vuex);
2123
this.listener = new Listener(this.io, this.emitter);
2224

@@ -28,40 +30,48 @@ export default class VueSocketIO {
2830
*/
2931
install(Vue){
3032

31-
Vue.prototype.$socket = this.io;
32-
Vue.prototype.$vueSocketIo = this;
33+
const namespace = this.namespaceName || this.io.nsp.replace("/", "");
34+
35+
if (this.useConnectionNamespace) {
36+
if (typeof Vue.prototype.$socket === "object") {
37+
Vue.prototype.$socket = {
38+
...Vue.prototype.$socket,
39+
[namespace]: this.io
40+
};
41+
42+
Vue.prototype.$vueSocketIo = {...Vue.prototype.$vueSocketIo, [namespace]: this};
43+
} else {
44+
Vue.prototype.$socket = {
45+
[namespace]: this.io
46+
};
47+
Vue.prototype.$vueSocketIo = { [namespace]: this};
48+
}
49+
} else {
50+
Vue.prototype.$socket = this.io;
51+
Vue.prototype.$vueSocketIo = this;
52+
}
53+
3354
Vue.mixin(Mixin);
3455

3556
Logger.info('Vue-Socket.io plugin enabled');
3657

3758
}
3859

39-
40-
/**
41-
* registering SocketIO instance
42-
* @param connection
43-
* @param options
44-
*/
45-
connect(connection, options){
46-
47-
if(connection && typeof connection === 'object'){
48-
49-
Logger.info('Received socket.io-client instance');
50-
51-
return connection;
52-
53-
} else if(typeof connection === 'string'){
54-
55-
Logger.info('Received connection string');
56-
57-
return this.io = SocketIO(connection, options);
58-
59-
} else {
60-
61-
throw new Error('Unsupported connection type');
62-
63-
}
64-
60+
/**
61+
* registering SocketIO instance
62+
* @param connection
63+
* @param options
64+
*/
65+
connect(connection, options) {
66+
if (connection && typeof connection === "object") {
67+
Logger.info(`Received socket.io-client instance`);
68+
return connection;
69+
} else if (typeof connection === "string") {
70+
const io = SocketIO(connection, options);
71+
Logger.info(`Received connection string`);
72+
return (this.io = io);
73+
} else {
74+
throw new Error("Unsupported connection type");
6575
}
66-
76+
}
6777
}

‎src/mixin.js

Lines changed: 48 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,21 @@ export default {
77

88
if(!this.sockets) this.sockets = {};
99

10-
this.sockets.subscribe = (event, callback) => {
10+
if (typeof this.$vueSocketIo === 'object') {
11+
for (const namespace of Object.keys(this.$vueSocketIo)) {
12+
this.sockets[namespace] = {
13+
subscribe: (event, callback) => {
14+
this.$vueSocketIo[namespace].emitter.addListener(event, callback, this);
15+
},
16+
unsubscribe: (event) => {
17+
this.$vueSocketIo[namespace].emitter.removeListener(event, this);
18+
}
19+
}
20+
}
21+
} else {
1122
this.$vueSocketIo.emitter.addListener(event, callback, this);
12-
};
13-
14-
this.sockets.unsubscribe = (event) => {
1523
this.$vueSocketIo.emitter.removeListener(event, this);
16-
};
17-
24+
}
1825
},
1926

2027
/**
@@ -24,14 +31,27 @@ export default {
2431

2532
if(this.$options.sockets){
2633

27-
Object.keys(this.$options.sockets).forEach(event => {
28-
29-
if(event !== 'subscribe' && event !== 'unsubscribe') {
30-
this.$vueSocketIo.emitter.addListener(event, this.$options.sockets[event], this);
34+
if (typeof this.$vueSocketIo === 'object') {
35+
for (const namespace of Object.keys(this.$vueSocketIo)) {
36+
if (this.$options.sockets[namespace]) {
37+
Object.keys(this.$options.sockets[namespace]).forEach(event => {
38+
39+
if(event !== 'subscribe' && event !== 'unsubscribe') {
40+
this.$vueSocketIo[namespace].emitter.addListener(event, this.$options.sockets[namespace][event], this);
41+
}
42+
43+
});
44+
}
3145
}
32-
33-
});
34-
46+
} else {
47+
Object.keys(this.$options.sockets).forEach(event => {
48+
49+
if(event !== 'subscribe' && event !== 'unsubscribe') {
50+
this.$vueSocketIo.emitter.addListener(event, this.$options.sockets[event], this);
51+
}
52+
53+
});
54+
}
3555
}
3656

3757
},
@@ -43,11 +63,23 @@ export default {
4363

4464
if(this.$options.sockets){
4565

46-
Object.keys(this.$options.sockets).forEach(event => {
66+
if (typeof this.$vueSocketIo === 'object') {
67+
for (const namespace of Object.keys(this.$vueSocketIo)) {
68+
if (this.$options.sockets[namespace]) {
69+
Object.keys(this.$options.sockets[namespace]).forEach(event => {
4770

48-
this.$vueSocketIo.emitter.removeListener(event, this);
71+
this.$vueSocketIo[namespace].emitter.removeListener(event, this);
72+
73+
});
74+
}
75+
}
76+
} else {
77+
Object.keys(this.$options.sockets).forEach(event => {
4978

50-
});
79+
this.$vueSocketIo.emitter.removeListener(event, this);
80+
81+
});
82+
}
5183

5284
}
5385

0 commit comments

Comments
 (0)