feat(): Multiple namespaced connections
Sherzod Aripjanov
4 years ago
parent
2f63eebb70
commit
35b3591b45
File diff suppressed because one or more lines are too long
@ -1,136 +1,113 @@
|
||||
import Logger from './logger';
|
||||
|
||||
export default class EventEmitter{
|
||||
|
||||
constructor(vuex = {}){
|
||||
Logger.info(vuex ? `Vuex adapter enabled` : `Vuex adapter disabled`);
|
||||
Logger.info(vuex.mutationPrefix ? `Vuex socket mutations enabled` : `Vuex socket mutations disabled`);
|
||||
Logger.info(vuex ? `Vuex socket actions enabled` : `Vuex socket actions disabled`);
|
||||
this.store = vuex.store;
|
||||
this.actionPrefix = vuex.actionPrefix ? vuex.actionPrefix : 'SOCKET_';
|
||||
this.mutationPrefix = vuex.mutationPrefix;
|
||||
this.listeners = new Map();
|
||||
export default class EventEmitter {
|
||||
constructor(vuex = {}) {
|
||||
Logger.info(vuex ? `Vuex adapter enabled` : `Vuex adapter disabled`);
|
||||
Logger.info(vuex.mutationPrefix ? `Vuex socket mutations enabled` : `Vuex socket mutations disabled`);
|
||||
Logger.info(vuex ? `Vuex socket actions enabled` : `Vuex socket actions disabled`);
|
||||
this.store = vuex.store;
|
||||
this.actionPrefix = vuex.actionPrefix ? vuex.actionPrefix : 'SOCKET_';
|
||||
this.mutationPrefix = vuex.mutationPrefix ? vuex.mutationPrefix : 'SOCKET_';
|
||||
this.listeners = new Map();
|
||||
}
|
||||
|
||||
/**
|
||||
* register new event listener with vuejs component instance
|
||||
* @param event
|
||||
* @param callback
|
||||
* @param component
|
||||
*/
|
||||
addListener(event, callback, component) {
|
||||
if (typeof callback === 'function') {
|
||||
if (!this.listeners.has(event)) this.listeners.set(event, []);
|
||||
this.listeners.get(event).push({ callback, component });
|
||||
|
||||
Logger.info(`#${event} subscribe, component: ${component.$options.name}`);
|
||||
} else {
|
||||
throw new Error(`callback must be a function`);
|
||||
}
|
||||
|
||||
/**
|
||||
* register new event listener with vuejs component instance
|
||||
* @param event
|
||||
* @param callback
|
||||
* @param component
|
||||
*/
|
||||
addListener(event, callback, component){
|
||||
|
||||
if(typeof callback === 'function'){
|
||||
|
||||
if (!this.listeners.has(event)) this.listeners.set(event, []);
|
||||
this.listeners.get(event).push({ callback, component });
|
||||
|
||||
Logger.info(`#${event} subscribe, component: ${component.$options.name}`);
|
||||
|
||||
} else {
|
||||
|
||||
throw new Error(`callback must be a function`);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* remove a listenler
|
||||
* @param event
|
||||
* @param component
|
||||
*/
|
||||
removeListener(event, component) {
|
||||
if (this.listeners.has(event)) {
|
||||
const listeners = this.listeners.get(event).filter(listener => listener.component !== component);
|
||||
|
||||
if (listeners.length > 0) {
|
||||
this.listeners.set(event, listeners);
|
||||
} else {
|
||||
this.listeners.delete(event);
|
||||
}
|
||||
|
||||
Logger.info(`#${event} unsubscribe, component: ${component.$options.name}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* remove a listenler
|
||||
* @param event
|
||||
* @param component
|
||||
*/
|
||||
removeListener(event, component){
|
||||
|
||||
if(this.listeners.has(event)){
|
||||
|
||||
const listeners = this.listeners.get(event).filter(listener => (
|
||||
listener.component !== component
|
||||
));
|
||||
|
||||
if (listeners.length > 0) {
|
||||
this.listeners.set(event, listeners);
|
||||
} else {
|
||||
this.listeners.delete(event);
|
||||
}
|
||||
|
||||
Logger.info(`#${event} unsubscribe, component: ${component.$options.name}`);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* broadcast incoming event to components
|
||||
* @param event
|
||||
* @param args
|
||||
*/
|
||||
emit(event, args) {
|
||||
if (this.listeners.has(event)) {
|
||||
Logger.info(`Broadcasting: #${event}, Data:`, args);
|
||||
|
||||
this.listeners.get(event).forEach(listener => {
|
||||
listener.callback.call(listener.component, args);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* broadcast incoming event to components
|
||||
* @param event
|
||||
* @param args
|
||||
*/
|
||||
emit(event, args){
|
||||
|
||||
if(this.listeners.has(event)){
|
||||
|
||||
Logger.info(`Broadcasting: #${event}, Data:`, args);
|
||||
|
||||
this.listeners.get(event).forEach((listener) => {
|
||||
listener.callback.call(listener.component, args);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
if(event !== 'ping' && event !== 'pong') {
|
||||
this.dispatchStore(event, args);
|
||||
if (event !== 'ping' && event !== 'pong') {
|
||||
this.dispatchStore(event, args);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* dispatching vuex actions
|
||||
* @param event
|
||||
* @param args
|
||||
*/
|
||||
dispatchStore(event, args) {
|
||||
if (this.store && this.store._actions) {
|
||||
let prefixedEvent;
|
||||
if (typeof this.actionPrefix === 'function') {
|
||||
prefixedEvent = this.actionPrefix(event);
|
||||
} else {
|
||||
prefixedEvent = this.actionPrefix + event;
|
||||
}
|
||||
|
||||
for (let key in this.store._actions) {
|
||||
let action = key.split('/').pop();
|
||||
|
||||
if (action === prefixedEvent) {
|
||||
Logger.info(`Dispatching Action: ${key}, Data:`, args);
|
||||
|
||||
this.store.dispatch(key, args);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
if (this.store && this.store._mutations) {
|
||||
let prefixedEvent;
|
||||
if (typeof this.mutationPrefix === 'function') {
|
||||
prefixedEvent = this.mutationPrefix(event);
|
||||
} else {
|
||||
prefixedEvent = (this.mutationPrefix || '') + event;
|
||||
}
|
||||
|
||||
/**
|
||||
* dispatching vuex actions
|
||||
* @param event
|
||||
* @param args
|
||||
*/
|
||||
dispatchStore(event, args){
|
||||
|
||||
if(this.store && this.store._actions){
|
||||
|
||||
let prefixed_event = this.actionPrefix + event;
|
||||
|
||||
for (let key in this.store._actions) {
|
||||
|
||||
let action = key.split('/').pop();
|
||||
|
||||
if(action === prefixed_event) {
|
||||
|
||||
Logger.info(`Dispatching Action: ${key}, Data:`, args);
|
||||
|
||||
this.store.dispatch(key, args);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
for (let key in this.store._mutations) {
|
||||
let mutation = key.split('/').pop();
|
||||
|
||||
if(this.mutationPrefix) {
|
||||
|
||||
let prefixed_event = this.mutationPrefix + event;
|
||||
|
||||
for (let key in this.store._mutations) {
|
||||
|
||||
let mutation = key.split('/').pop();
|
||||
|
||||
if(mutation === prefixed_event) {
|
||||
|
||||
Logger.info(`Commiting Mutation: ${key}, Data:`, args);
|
||||
|
||||
this.store.commit(key, args);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
if (mutation === prefixedEvent) {
|
||||
Logger.info(`Commiting Mutation: ${key}, Data:`, args);
|
||||
|
||||
this.store.commit(key, args);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,35 +1,27 @@
|
||||
/**
|
||||
* shitty logger class
|
||||
*/
|
||||
export default new class VueSocketIOLogger {
|
||||
|
||||
constructor() {
|
||||
this.debug = false;
|
||||
this.prefix = '%cVue-Socket.io: ';
|
||||
}
|
||||
|
||||
info(text, data = '') {
|
||||
|
||||
if(this.debug) window.console.info(this.prefix+`%c${text}`, 'color: blue; font-weight: 600', 'color: #333333', data);
|
||||
|
||||
}
|
||||
|
||||
error() {
|
||||
|
||||
if(this.debug) window.console.error(this.prefix, ...arguments);
|
||||
|
||||
}
|
||||
|
||||
warn() {
|
||||
|
||||
if(this.debug) window.console.warn(this.prefix, ...arguments);
|
||||
|
||||
}
|
||||
|
||||
event(text, data = ''){
|
||||
|
||||
if(this.debug) window.console.info(this.prefix+`%c${text}`, 'color: blue; font-weight: 600', 'color: #333333', data);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
export default new (class VueSocketIOLogger {
|
||||
constructor() {
|
||||
this.debug = false;
|
||||
this.prefix = '%cVue-Socket.io: ';
|
||||
}
|
||||
|
||||
info(text, data = '') {
|
||||
if (this.debug)
|
||||
window.console.info(this.prefix + `%c${text}`, 'color: blue; font-weight: 600', 'color: #333333', data);
|
||||
}
|
||||
|
||||
error() {
|
||||
if (this.debug) window.console.error(this.prefix, ...arguments);
|
||||
}
|
||||
|
||||
warn() {
|
||||
if (this.debug) window.console.warn(this.prefix, ...arguments);
|
||||
}
|
||||
|
||||
event(text, data = '') {
|
||||
if (this.debug)
|
||||
window.console.info(this.prefix + `%c${text}`, 'color: blue; font-weight: 600', 'color: #333333', data);
|
||||
}
|
||||
})();
|
||||
|
||||
@ -1,56 +1,64 @@
|
||||
export default {
|
||||
|
||||
/**
|
||||
* Assign runtime callbacks
|
||||
*/
|
||||
beforeCreate(){
|
||||
|
||||
if(!this.sockets) this.sockets = {};
|
||||
|
||||
this.sockets.subscribe = (event, callback) => {
|
||||
this.$vueSocketIo.emitter.addListener(event, callback, this);
|
||||
};
|
||||
|
||||
this.sockets.unsubscribe = (event) => {
|
||||
this.$vueSocketIo.emitter.removeListener(event, this);
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Register all socket events
|
||||
*/
|
||||
mounted(){
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* Assign runtime callbacks
|
||||
*/
|
||||
beforeCreate() {
|
||||
if (!this.sockets) this.sockets = {};
|
||||
|
||||
this.sockets.subscribe = (event, callback) => {
|
||||
this.$vueSocketIo.emitter.addListener(event, callback, this);
|
||||
};
|
||||
|
||||
this.sockets.unsubscribe = event => {
|
||||
this.$vueSocketIo.emitter.removeListener(event, this);
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Register all socket events
|
||||
*/
|
||||
mounted() {
|
||||
const { sockets } = this.$options;
|
||||
const { emitter } = this.$vueSocketIo;
|
||||
|
||||
if (sockets) {
|
||||
Object.keys(sockets).forEach(eventOrNamespace => {
|
||||
const functionOrObject = sockets[eventOrNamespace];
|
||||
if (
|
||||
typeof functionOrObject === 'function' &&
|
||||
eventOrNamespace !== 'subscribe' &&
|
||||
eventOrNamespace !== 'unsubscribe'
|
||||
) {
|
||||
emitter.addListener(eventOrNamespace, functionOrObject, this);
|
||||
} else {
|
||||
Object.keys(functionOrObject).forEach(event => {
|
||||
if (event !== 'subscribe' && event !== 'unsubscribe') {
|
||||
emitter.addListener(`${eventOrNamespace}_${event}`, functionOrObject[event], this);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* unsubscribe when component unmounting
|
||||
*/
|
||||
beforeDestroy(){
|
||||
|
||||
if(this.$options.sockets){
|
||||
|
||||
Object.keys(this.$options.sockets).forEach(event => {
|
||||
|
||||
this.$vueSocketIo.emitter.removeListener(event, this);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* unsubscribe when component unmounting
|
||||
*/
|
||||
beforeDestroy() {
|
||||
const { sockets } = this.$options;
|
||||
const { emitter } = this.$vueSocketIo;
|
||||
|
||||
if (sockets) {
|
||||
Object.keys(sockets).forEach(eventOrNamespace => {
|
||||
const functionOrObject = sockets[eventOrNamespace];
|
||||
if (typeof functionOrObject === 'function') {
|
||||
emitter.removeListener(eventOrNamespace, functionOrObject, this);
|
||||
} else {
|
||||
Object.keys(functionOrObject).forEach(event => {
|
||||
emitter.removeListener(event, functionOrObject[event], this);
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue