mirror of
https://github.com/MetinSeylan/Vue-Socket.io.git
synced 2025-04-16 15:21:28 +02:00
Merge branch 'feature/namespaces'
This commit is contained in:
Leonardo Dominguez
commit
a119e6901d
3 changed files with 127 additions and 51 deletions
36
README.md
36
README.md
|
|
@ -86,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
|
||||
|
||||
|
|
@ -146,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
|
||||
|
||||
[](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io)
|
||||
|
|
|
|||
82
src/index.js
82
src/index.js
|
|
@ -5,48 +5,56 @@ import Emitter from "./emitter";
|
|||
import SocketIO from "socket.io-client";
|
||||
|
||||
export default class VueSocketIO {
|
||||
/**
|
||||
* lets take all resource
|
||||
* @param io
|
||||
* @param vuex
|
||||
* @param debug
|
||||
* @param 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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Vue.js entry point
|
||||
* @param Vue
|
||||
*/
|
||||
install(Vue) {
|
||||
const namespace = this.io.nsp.replace("/", "");
|
||||
/**
|
||||
* lets take all resource
|
||||
* @param io
|
||||
* @param vuex
|
||||
* @param debug
|
||||
* @param options
|
||||
*/
|
||||
constructor({connection, vuex, debug, options}){
|
||||
|
||||
Logger.debug = debug;
|
||||
this.io = this.connect(connection, options);
|
||||
this.useConnectionNamespace = (options && options.useConnectionNamespace) || false;
|
||||
this.emitter = new Emitter(vuex);
|
||||
this.listener = new Listener(this.io, this.emitter);
|
||||
|
||||
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);
|
||||
/**
|
||||
* Vue.js entry point
|
||||
* @param Vue
|
||||
*/
|
||||
install(Vue){
|
||||
|
||||
Logger.info(`Vue-Socket.io plugin enabled`);
|
||||
}
|
||||
const namespace = 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
|
||||
|
|
|
|||
58
src/mixin.js
58
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);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue