README.md

@@ -12,17 +12,13 @@
   <a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/npm/l/vue-socket.io.svg"/></a>
   <a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/github/stars/MetinSeylan/Vue-Socket.io.svg"/></a>
 </p>
-<p align="center">
+
-<a href="https://www.patreon.com/MetinSeylan">
+<p>Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements<p>
-	<img alt="Patreon" src="https://c5.patreon.com/external/logo/become_a_patron_button.png" height="50" />
-</a>
-</p>
-<p>Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements.<p>
 
 ###### Demo
 - <a href="http://metinseylan.com/vuesocketio/" target="_blank">Chat Application</a>
 - <a href="http://metinseylan.com" target="_blank">Car Tracking Application</a>
-<p>You can also check my other npm library <a href="https://github.com/MetinSeylan/Nestjs-OpenTelemetry">Nestjs OpenTelemetry</a></p>
+
 <p>
 are you looking for old documentation? <a href="https://github.com/MetinSeylan/Vue-Socket.io/blob/master/docs/OLD_README.md">it's here</a>
 </p>
@@ -31,7 +27,7 @@ are you looking for old documentation? <a href="https://github.com/MetinSeylan/V
 ``` bash
 npm install vue-socket.io --save
 ```
-##### Using Connection String
+
 ``` javascript
 import Vue from 'vue'
 import store from './store'
@@ -45,37 +41,8 @@ Vue.use(new VueSocketIO({
         store,
         actionPrefix: 'SOCKET_',
         mutationPrefix: 'SOCKET_'
-    },
-    options: { path: "/my-app/" } //Optional options
-}))
-
-new Vue({
-    router,
-    store,
-    render: h => h(App)
-}).$mount('#app')
-```
-
-##### Using socket.io-client Instance
-``` javascript
-import Vue from 'vue'
-import store from './store'
-import App from './App.vue'
-import VueSocketIO from 'vue-socket.io'
-import SocketIO from 'socket.io-client'
-
-const options = { path: '/my-app/' }; //Options object to pass into SocketIO
-
-Vue.use(new VueSocketIO({
-    debug: true,
-    connection: SocketIO('http://metinseylan.com:1992', options), //options object is Optional
-    vuex: {
-      store,
-      actionPrefix: "SOCKET_",
-      mutationPrefix: "SOCKET_"
     }
-  })
+}))
-);
 
 new Vue({
     router,
@@ -94,7 +61,7 @@ vuex.mutationPrefix|String |`null`|Optional|Prefix for emitting server side vuex
 
 #### 🌈 Component Level Usage
 
-<p>If you want to listen socket events from component side, you need to add `sockets` object in Vue component. After that every function will start to listen events, depends on object key</p>
+<p>If you want to listen socket events from component side, you need to add `sockets` object in Vue component, and every function will start to listen events, depends on object key</p>
 
 ``` javascript
 new Vue({
@@ -127,35 +94,6 @@ this.sockets.subscribe('EVENT_NAME', (data) => {
 this.sockets.unsubscribe('EVENT_NAME');
 ```
 
-##### Defining handlers for events with special characters
-
-<p>If you want to handle 'kebab-case', or "event with space inside it" events, then you have to define it via the following way</p>
-
-``` javascript
-export default {
-  name: 'Test',
-  sockets: {
-    connect: function () {
-      console.log('socket to notification channel connected')
-    },
-  },
-
-  data () {
-    return {
-      something: [
-         // ... something here for the data if you need.
-      ]
-    }
-  },
-
-  mounted () {
-    this.$socket.subscribe("kebab-case", function(data) {
-        console.log("This event was fired by eg. sio.emit('kebab-case')", data)
-    })
-  }
-}
-```
-
 #### 🏆 Vuex Integration
 <p>When you set store parameter in installation, `Vue-Socket.io` will start sending events to Vuex store. If you set both prefix for vuex, you can use `actions` and `mutations` at the same time. But, best way to use is just `actions`</p>
 
@@ -180,11 +118,6 @@ export default new Vuex.Store({
 })
 ```
 
-## Stargazers over time
-
-[![Stargazers over time](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io.svg)](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io)
-   
-
 <p align="center">
     <a href="https://github.com/MetinSeylan/Vue-Socket.io" target="_blank">
     <img src="https://media.giphy.com/media/11jlnltQgUi2mQ/giphy.gif">

index.d.ts

@@ -1,63 +0,0 @@
-import SocketIOClient from "socket.io-client";
-import {
-    DefaultComputed,
-    DefaultData,
-    DefaultMethods,
-    DefaultProps,
-    PropsDefinition,
-} from "vue/types/options";
-import { Vue } from "vue/types/vue";
-import { PluginFunction, PluginObject } from "vue";
-import { Store } from "vuex";
-
-interface socketHandler<T> {
-    (this: T, ...args: any[]): void
-}
-
-interface Sockets<V> {
-    [key: string]: socketHandler<V>
-}
-
-declare module 'vue/types/vue' {
-    interface Vue {
-        $socket: SocketIOClient.Socket,
-        sockets: {
-            subscribe(eventName: string, handler: socketHandler<Vue>): void,
-            unsubscribe(eventName: string): void,
-        }
-    }
-}
-
-declare module 'vue/types/options' {
-    interface ComponentOptions<
-        V extends Vue,
-        Data=DefaultData<V>,
-        Methods=DefaultMethods<V>,
-        Computed=DefaultComputed,
-        PropsDef=PropsDefinition<DefaultProps>,
-        Props=DefaultProps> {
-        sockets?: Sockets<V>
-    }
-}
-
-export interface VueSocketOptions {
-    debug?: boolean;
-    connection: string | SocketIOClient.Socket,
-    vuex?: {
-        store?: Store<any>,
-        actionPrefix?: string,
-        mutationPrefix?: string,
-        options?: {
-            useConnectionNamespace?: boolean
-        }
-    },
-        // type declarations for optional options
-    options?:{
-        path?: string;
-    }
-}
-
-export default class VueSocketIO<T> implements PluginObject<T> {
-    constructor (options: VueSocketOptions);
-    install: PluginFunction<T>
-}

package.json

@@ -1,8 +1,8 @@
 {
   "name": "vue-socket.io",
   "author": "Metin Seylan <metinsyln@gmail.com>",
-  "version": "3.0.10",
+  "version": "3.0.3",
-  "description": "socket.io implementation for Vue.js and Vuex",
+  "description": "socket.io implemantation for vuejs and vuex",
   "main": "dist/vue-socketio.js",
   "scripts": {
     "build": "webpack --mode=production --progress --hide-modules"

src/emitter.js

@@ -77,9 +77,7 @@ export default class EventEmitter{
 
         }
 
-        if(event !== 'ping' && event !== 'pong') {
+        this.dispatchStore(event, args);
-            this.dispatchStore(event, args);
-        }
 
     }
 
@@ -93,13 +91,11 @@ export default class EventEmitter{
 
         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) {
+                if(action === this.actionPrefix+event) {
 
                     Logger.info(`Dispatching Action: ${key}, Data:`, args);
 
@@ -111,13 +107,11 @@ export default class EventEmitter{
 
             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) {
+                    if(mutation === this.mutationPrefix+event) {
 
                         Logger.info(`Commiting Mutation: ${key}, Data:`, args);
 

src/index.js

@@ -1,6 +1,6 @@
 import Mixin from './mixin';
 import Logger from './logger';
-import Listener from './listener';
+import Listenler from './listenler';
 import Emitter from './emitter';
 import SocketIO from 'socket.io-client';
 
@@ -11,33 +11,24 @@ export default class VueSocketIO {
      * @param io
      * @param vuex
      * @param debug
-     * @param options
      */
-    constructor({connection, vuex, debug, options}){
+    constructor({connection, vuex, debug}){
 
         Logger.debug = debug;
-        this.io = this.connect(connection, options);
+        this.io = this.connect(connection);
         this.emitter = new Emitter(vuex);
-        this.listener = new Listener(this.io, this.emitter);
+        this.listener = new Listenler(this.io, this.emitter);
 
     }
 
     /**
-     * Vue.js entry point
+     * Vuejs entrypoint
      * @param Vue
      */
     install(Vue){
 
-        const version = Number(Vue.version.split('.')[0])
+        Vue.prototype.$socket = this.io;
-
+        Vue.prototype.$vueSocketIo = this;
-        if (version >= 3) {
-            Vue.config.globalProperties.$socket = this.io;
-            Vue.config.globalProperties.$vueSocketIo = this;
-        } else {
-            Vue.prototype.$socket = this.io;
-            Vue.prototype.$vueSocketIo = this;
-        }
-
         Vue.mixin(Mixin);
 
         Logger.info('Vue-Socket.io plugin enabled');
@@ -46,11 +37,10 @@ export default class VueSocketIO {
 
 
     /**
-     * registering SocketIO instance
+     * registering socketio instance
      * @param connection
-     * @param options
      */
-    connect(connection, options){
+    connect(connection){
 
         if(connection && typeof connection === 'object'){
 
@@ -62,7 +52,7 @@ export default class VueSocketIO {
 
             Logger.info('Received connection string');
 
-            return this.io = SocketIO(connection, options);
+            return this.io = SocketIO(connection);
 
         } else {
 

src/listenler.js

@@ -1,5 +1,5 @@
 
-export default class VueSocketIOListener {
+export default class VueSocketIOListenler {
 
     /**
      * socket.io-client reserved event keywords
@@ -38,7 +38,7 @@ export default class VueSocketIOListener {
 
             this.onEvent(event, args)
         };
-        VueSocketIOListener.staticEvents.forEach(event => this.io.on(event, args => this.onEvent(event, args)))
+        VueSocketIOListenler.staticEvents.forEach(event => this.io.on(event, () => this.onEvent(event)))
     }
 
     /**

src/mixin.js

@@ -1,26 +1,9 @@
 export default {
 
     /**
-     *  Assign runtime callbacks
+     * lets collect all socket callback functions then register
      */
-    beforeCreate(){
+    created(){
-
-        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){
 
@@ -32,6 +15,19 @@ export default {
 
             });
 
+            this.sockets = {
+                subscribe: (event, callback) => {
+
+                    this.$vueSocketIo.emitter.addListener(event, callback, this);
+
+                },
+                unsubscribe: (event) => {
+
+                    this.$vueSocketIo.emitter.removeListener(event, this);
+
+                }
+            };
+
         }
 
     },