Rolled back changes from 8988085bef due to numerous breaking changes.
David Giangrave
4 years ago
parent
bcd466a22e
commit
977f56102b
File diff suppressed because one or more lines are too long
@ -1,145 +1,117 @@
|
|||||||
import Logger from './logger';
|
import Logger from './logger';
|
||||||
|
|
||||||
export default class EventEmitter{
|
export default class EventEmitter {
|
||||||
|
constructor(vuex = {}) {
|
||||||
constructor(vuex = {}){
|
Logger.info(vuex ? `Vuex adapter enabled` : `Vuex adapter disabled`);
|
||||||
Logger.info(vuex ? `Vuex adapter enabled` : `Vuex adapter disabled`);
|
this.store = vuex.store;
|
||||||
this.store = vuex.store;
|
this.actionPrefix = vuex.actionPrefix;
|
||||||
this.actionPrefix = vuex.actionPrefix;
|
this.mutationPrefix = vuex.mutationPrefix;
|
||||||
this.mutationPrefix = vuex.mutationPrefix;
|
this.listeners = new Map();
|
||||||
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
|
* remove a listenler
|
||||||
* @param callback
|
* @param event
|
||||||
* @param component
|
* @param component
|
||||||
*/
|
*/
|
||||||
addListener(event, callback, component){
|
removeListener(event, component) {
|
||||||
|
if (this.listeners.has(event)) {
|
||||||
if(typeof callback === 'function'){
|
const listeners = this.listeners.get(event).filter(listener => listener.component !== component);
|
||||||
|
|
||||||
if (!this.listeners.has(event)) this.listeners.set(event, []);
|
if (listeners.length > 0) {
|
||||||
this.listeners.get(event).push({ callback, component });
|
this.listeners.set(event, listeners);
|
||||||
|
} else {
|
||||||
Logger.info(`#${event} subscribe, component: ${component.$options.name}`);
|
this.listeners.delete(event);
|
||||||
|
}
|
||||||
} else {
|
|
||||||
|
Logger.info(`#${event} unsubscribe, component: ${component.$options.name}`);
|
||||||
throw new Error(`callback must be a function`);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
/**
|
|
||||||
* remove a listenler
|
/**
|
||||||
* @param event
|
* broadcast incoming event to components
|
||||||
* @param component
|
* @param event
|
||||||
*/
|
* @param args
|
||||||
removeListener(event, component){
|
*/
|
||||||
|
emit(event, args) {
|
||||||
if(this.listeners.has(event)){
|
if (this.listeners.has(event)) {
|
||||||
|
Logger.info(`Broadcasting: #${event}, Data:`, args);
|
||||||
const listeners = this.listeners.get(event).filter(listener => (
|
|
||||||
listener.component !== component
|
this.listeners.get(event).forEach(listener => {
|
||||||
));
|
listener.callback.call(listener.component, args);
|
||||||
|
});
|
||||||
if (listeners.length > 0) {
|
|
||||||
this.listeners.set(event, listeners);
|
|
||||||
} else {
|
|
||||||
this.listeners.delete(event);
|
|
||||||
}
|
|
||||||
|
|
||||||
Logger.info(`#${event} unsubscribe, component: ${component.$options.name}`);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
if (event !== 'ping' && event !== 'pong') {
|
||||||
* broadcast incoming event to components
|
this.dispatchStore(event, args);
|
||||||
* @param event
|
}
|
||||||
* @param args
|
}
|
||||||
*/
|
|
||||||
emit(event, args){
|
/**
|
||||||
|
* dispatching vuex actions
|
||||||
if(this.listeners.has(event)){
|
* @param event
|
||||||
|
* @param args
|
||||||
Logger.info(`Broadcasting: #${event}, Data:`, args);
|
*/
|
||||||
|
dispatchStore(event, args) {
|
||||||
|
if (this.store) {
|
||||||
|
if (this.store._actions) {
|
||||||
|
let action_name = event;
|
||||||
|
|
||||||
|
if (!!this.actionPrefix) {
|
||||||
|
let namespace_sep_pos = event.lastIndexOf('/');
|
||||||
|
action_name =
|
||||||
|
namespace_sep_pos !== -1
|
||||||
|
? [event.slice(0, namespace_sep_pos + 1), this.actionPrefix, event.slice(namespace_sep_pos + 1)].join('')
|
||||||
|
: this.actionPrefix + event;
|
||||||
|
}
|
||||||
|
|
||||||
this.listeners.get(event).forEach((listener) => {
|
for (let key in this.store._actions) {
|
||||||
listener.callback.call(listener.component, args);
|
if (key === action_name) {
|
||||||
});
|
Logger.info(`Dispatching Action: ${key}, Data:`, args);
|
||||||
|
|
||||||
|
this.store.dispatch(key, args);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
if(event !== 'ping' && event !== 'pong') {
|
|
||||||
this.dispatchStore(event, args);
|
if (this.mutationPrefix) {
|
||||||
|
let mutation_name = event;
|
||||||
|
|
||||||
|
if (!!this.mutationPrefix) {
|
||||||
|
let namespace_sep_pos = event.lastIndexOf('/');
|
||||||
|
mutation_name =
|
||||||
|
namespace_sep_pos !== -1
|
||||||
|
? [event.slice(0, namespace_sep_pos + 1), this.mutationPrefix, event.slice(namespace_sep_pos + 1)].join(
|
||||||
|
''
|
||||||
|
)
|
||||||
|
: this.mutationPrefix + event;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
for (let key in this.store._mutations) {
|
||||||
|
if (key === mutation_name) {
|
||||||
|
Logger.info(`Committing Mutation: ${key}, Data:`, args);
|
||||||
/**
|
|
||||||
* dispatching vuex actions
|
|
||||||
* @param event
|
|
||||||
* @param args
|
|
||||||
*/
|
|
||||||
dispatchStore(event, args){
|
|
||||||
|
|
||||||
if(this.store) {
|
|
||||||
|
|
||||||
if(this.store._actions){
|
|
||||||
|
|
||||||
let action_name = event;
|
|
||||||
|
|
||||||
if (!!this.actionPrefix) {
|
|
||||||
let namespace_sep_pos = event.lastIndexOf('/');
|
|
||||||
action_name = (namespace_sep_pos !== -1) ? [event.slice(0, namespace_sep_pos+1), this.actionPrefix, event.slice(namespace_sep_pos+1)].join('') : this.actionPrefix + event;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
for (let key in this.store._actions) {
|
|
||||||
|
|
||||||
if(key === action_name) {
|
|
||||||
|
|
||||||
Logger.info(`Dispatching Action: ${key}, Data:`, args);
|
|
||||||
|
|
||||||
this.store.dispatch(key, args);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.mutationPrefix) {
|
|
||||||
|
|
||||||
let mutation_name = event;
|
|
||||||
|
|
||||||
if (!!this.mutationPrefix) {
|
|
||||||
let namespace_sep_pos = event.lastIndexOf('/');
|
|
||||||
mutation_name = (namespace_sep_pos !== -1) ? [event.slice(0, namespace_sep_pos+1), this.mutationPrefix, event.slice(namespace_sep_pos+1)].join('') : this.mutationPrefix + event;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let key in this.store._mutations) {
|
|
||||||
|
|
||||||
if(key === mutation_name) {
|
|
||||||
|
|
||||||
Logger.info(`Committing Mutation: ${key}, Data:`, args);
|
|
||||||
|
|
||||||
this.store.commit(key, args);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
this.store.commit(key, args);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,51 +1,48 @@
|
|||||||
|
|
||||||
export default class VueSocketIOListener {
|
export default class VueSocketIOListener {
|
||||||
|
/**
|
||||||
/**
|
* socket.io-client reserved event keywords
|
||||||
* socket.io-client reserved event keywords
|
* @type {string[]}
|
||||||
* @type {string[]}
|
*/
|
||||||
*/
|
static staticEvents = [
|
||||||
static staticEvents = [
|
'connect',
|
||||||
'connect',
|
'error',
|
||||||
'error',
|
'disconnect',
|
||||||
'disconnect',
|
'reconnect',
|
||||||
'reconnect',
|
'reconnect_attempt',
|
||||||
'reconnect_attempt',
|
'reconnecting',
|
||||||
'reconnecting',
|
'reconnect_error',
|
||||||
'reconnect_error',
|
'reconnect_failed',
|
||||||
'reconnect_failed',
|
'connect_error',
|
||||||
'connect_error',
|
'connect_timeout',
|
||||||
'connect_timeout',
|
'connecting',
|
||||||
'connecting',
|
'ping',
|
||||||
'ping',
|
'pong'
|
||||||
'pong'
|
];
|
||||||
];
|
|
||||||
|
constructor(io, emitter) {
|
||||||
constructor(io, emitter){
|
this.io = io;
|
||||||
this.io = io;
|
this.register();
|
||||||
this.register();
|
this.emitter = emitter;
|
||||||
this.emitter = emitter;
|
}
|
||||||
}
|
|
||||||
|
/**
|
||||||
/**
|
* Listening all socket.io events
|
||||||
* Listening all socket.io events
|
*/
|
||||||
*/
|
register() {
|
||||||
register(){
|
this.io.onevent = packet => {
|
||||||
this.io.onevent = (packet) => {
|
let [event, ...args] = packet.data;
|
||||||
let [event, ...args] = packet.data;
|
|
||||||
|
if (args.length === 1) args = args[0];
|
||||||
if(args.length === 1) args = args[0];
|
|
||||||
|
this.onEvent(event, args);
|
||||||
this.onEvent(event, args)
|
};
|
||||||
};
|
VueSocketIOListener.staticEvents.forEach(event => this.io.on(event, args => this.onEvent(event, args)));
|
||||||
VueSocketIOListener.staticEvents.forEach(event => this.io.on(event, args => this.onEvent(event, args)))
|
}
|
||||||
}
|
|
||||||
|
/**
|
||||||
/**
|
* Broadcast all events to vuejs environment
|
||||||
* Broadcast all events to vuejs environment
|
*/
|
||||||
*/
|
onEvent(event, args) {
|
||||||
onEvent(event, args){
|
this.emitter.emit(event, args);
|
||||||
this.emitter.emit(event, args);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,35 +1,27 @@
|
|||||||
/**
|
/**
|
||||||
* shitty logger class
|
* shitty logger class
|
||||||
*/
|
*/
|
||||||
export default new class VueSocketIOLogger {
|
export default new (class VueSocketIOLogger {
|
||||||
|
constructor() {
|
||||||
constructor() {
|
this.debug = false;
|
||||||
this.debug = false;
|
this.prefix = '%cVue-Socket.io: ';
|
||||||
this.prefix = '%cVue-Socket.io: ';
|
}
|
||||||
}
|
|
||||||
|
info(text, data = '') {
|
||||||
info(text, data = '') {
|
if (this.debug)
|
||||||
|
window.console.info(this.prefix + `%c${text}`, 'color: blue; font-weight: 600', 'color: #333333', 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);
|
||||||
error() {
|
}
|
||||||
|
|
||||||
if(this.debug) window.console.error(this.prefix, ...arguments);
|
warn() {
|
||||||
|
if (this.debug) window.console.warn(this.prefix, ...arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
warn() {
|
event(text, data = '') {
|
||||||
|
if (this.debug)
|
||||||
if(this.debug) window.console.warn(this.prefix, ...arguments);
|
window.console.info(this.prefix + `%c${text}`, 'color: blue; font-weight: 600', 'color: #333333', data);
|
||||||
|
}
|
||||||
}
|
})();
|
||||||
|
|
||||||
event(text, data = ''){
|
|
||||||
|
|
||||||
if(this.debug) window.console.info(this.prefix+`%c${text}`, 'color: blue; font-weight: 600', 'color: #333333', data);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,88 +1,40 @@
|
|||||||
export default {
|
export default {
|
||||||
|
/**
|
||||||
/**
|
* Assign runtime callbacks
|
||||||
* Assign runtime callbacks
|
*/
|
||||||
*/
|
beforeCreate() {
|
||||||
beforeCreate(){
|
if (!this.sockets) this.sockets = {};
|
||||||
|
|
||||||
if(!this.sockets) this.sockets = {};
|
this.sockets.subscribe = (event, callback) => {
|
||||||
|
this.$vueSocketIo.emitter.addListener(event, callback, this);
|
||||||
if (typeof this.$vueSocketIo === 'object') {
|
};
|
||||||
for (const namespace of Object.keys(this.$vueSocketIo)) {
|
|
||||||
this.sockets[namespace] = {
|
this.sockets.unsubscribe = event => {
|
||||||
subscribe: (event, callback) => {
|
this.$vueSocketIo.emitter.removeListener(event, this);
|
||||||
this.$vueSocketIo[namespace].emitter.addListener(event, callback, this);
|
};
|
||||||
},
|
},
|
||||||
unsubscribe: (event) => {
|
|
||||||
this.$vueSocketIo[namespace].emitter.removeListener(event, this);
|
/**
|
||||||
}
|
* Register all socket events
|
||||||
}
|
*/
|
||||||
}
|
mounted() {
|
||||||
} else {
|
if (this.$options.sockets) {
|
||||||
this.$vueSocketIo.emitter.addListener(event, callback, this);
|
Object.keys(this.$options.sockets).forEach(event => {
|
||||||
this.$vueSocketIo.emitter.removeListener(event, this);
|
if (event !== 'subscribe' && event !== 'unsubscribe') {
|
||||||
}
|
this.$vueSocketIo.emitter.addListener(event, this.$options.sockets[event], this);
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Register all socket events
|
|
||||||
*/
|
|
||||||
mounted(){
|
|
||||||
|
|
||||||
if(this.$options.sockets){
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* unsubscribe when component unmounting
|
|
||||||
*/
|
|
||||||
beforeDestroy(){
|
|
||||||
|
|
||||||
if(this.$options.sockets){
|
|
||||||
|
|
||||||
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[namespace].emitter.removeListener(event, this);
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
Object.keys(this.$options.sockets).forEach(event => {
|
|
||||||
|
|
||||||
this.$vueSocketIo.emitter.removeListener(event, this);
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
},
|
||||||
}
|
|
||||||
|
/**
|
||||||
|
* unsubscribe when component unmounting
|
||||||
|
*/
|
||||||
|
beforeDestroy() {
|
||||||
|
if (this.$options.sockets) {
|
||||||
|
Object.keys(this.$options.sockets).forEach(event => {
|
||||||
|
this.$vueSocketIo.emitter.removeListener(event, this);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue