forks
/
Vue-Socket.io
mirror of https://github.com/MetinSeylan/Vue-Socket.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Handle more than one namespace (#207)

Browse Source 
* add: handle more than one namespace

* Revert "[FIX] Adjusting SocketIO client lib import (#202)"

This reverts commit ee1e7ed1ee.

* 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
pull/232/head
Leonardo E. Dominguez 5 years ago committed by Metin Seylan
parent ee1e7ed1ee
commit 8988085bef
4 changed files with 130 additions and 53 deletions
Show Stats Download Patch File Download Diff File

37
README.md
Unescape Escape View File

@ -57,7 +57,6 @@ new Vue({
import Vue from 'vue'
import store from './store'
import App from './App.vue'
import SocketIO from 'socket.io-client';
import VueSocketIO from 'vue-socket.io'
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
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 +147,41 @@ export default new Vuex.Store({
})
```
#### 🏆 Connection Namespace
<p>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.</p>
``` 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)

4
dist/vue-socketio.js vendored
View File

File diff suppressed because one or more lines are too long

78
src/index.js
Unescape Escape View File

@ -1,8 +1,8 @@
import Mixin from './mixin';
import Logger from './logger';
import Listener from './listener';
import Emitter from './emitter';
import SocketIO from 'socket.io-client';
import Mixin from "./mixin";
import Logger from "./logger";
import Listener from "./listener";
import Emitter from "./emitter";
import SocketIO from "socket.io-client";
export default class VueSocketIO {
@ -17,6 +17,8 @@ export default class VueSocketIO {
Logger.debug = debug;
this.io = this.connect(connection, options);
this.useConnectionNamespace = (options && options.useConnectionNamespace);
this.namespaceName = (options && options.namespaceName);
this.emitter = new Emitter(vuex);
this.listener = new Listener(this.io, this.emitter);
@ -28,40 +30,48 @@ export default class VueSocketIO {
*/
install(Vue){
Vue.prototype.$socket = this.io;
Vue.prototype.$vueSocketIo = this;
const namespace = this.namespaceName || this.io.nsp.replace("/", "");
if (this.useConnectionNamespace) {
if (typeof Vue.prototype.$socket === "object") {
Vue.prototype.$socket = {
...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.mixin(Mixin);
Logger.info('Vue-Socket.io plugin enabled');
}
/**
* registering SocketIO instance
* @param connection
* @param options
*/
connect(connection, options){
if(connection && typeof connection === 'object'){
Logger.info('Received socket.io-client instance');
return connection;
} else if(typeof connection === 'string'){
Logger.info('Received connection string');
return this.io = SocketIO(connection, options);
} else {
throw new Error('Unsupported connection type');
}
/**
* registering SocketIO instance
* @param connection
* @param options
*/
connect(connection, options) {
if (connection && typeof connection === "object") {
Logger.info(`Received socket.io-client instance`);
return connection;
} else if (typeof connection === "string") {
const io = SocketIO(connection, options);
Logger.info(`Received connection string`);
return (this.io = io);
} else {
throw new Error("Unsupported connection type");
}
}
}

64
src/mixin.js
Unescape Escape View File

@ -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(event !== 'subscribe' && event !== 'unsubscribe') {
this.$vueSocketIo.emitter.addListener(event, this.$options.sockets[event], this);
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[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);
});
}
}

Write Preview
Loading…
Cancel
Save