fix(socket.io): update observer to work with socket.io 2

Author: killix

dist/build.js

@@ -26,6 +26,19 @@
   },
   "homepage": "https://github.com/broidHQ/vue-socket-io#readme",
   "dependencies": {
+    "babel-plugin-proxy": "^1.1.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
+    "babel-plugin-transform-es2015-spread": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "babel-preset-vue-app": "^1.3.1",
     "socket.io-client": "^2.0.3",
     "typescript": "^2.5.3"
   },

package.json

@@ -5,7 +5,7 @@ export default class Observer {
     public Socket: any;
     public store: any;
 
-    constructor(connection, store) {
+    public constructor(connection, store) {
         if(typeof connection == 'string'){
             this.Socket = Socket(connection);
         } else {
@@ -16,17 +16,19 @@ export default class Observer {
           this.store = store;
         }
 
-        this.onEvent()
+        this.onEvent();
     }
 
-    onEvent(): void {
+    public onEvent(): void {
         var super_onevent = this.Socket.onevent;
         this.Socket.onevent = (packet) => {
             super_onevent.call(this.Socket, packet);
 
             Emitter.emit(packet.data[0], packet.data[1]);
 
-            if(this.store) this.passToStore('SOCKET_'+packet.data[0],  [ ...packet.data.slice(1)])
+            if (this.store) {
+              this.passToStore('SOCKET_'+packet.data[0],  packet.data[1]);
+            }
         };
 
         let _this = this;
@@ -35,32 +37,38 @@ export default class Observer {
             .forEach((value) => {
                 _this.Socket.on(value, (data) => {
                     Emitter.emit(value, data);
-                    if(_this.store) _this.passToStore('SOCKET_'+value, data)
+                    if (_this.store) {
+                      _this.passToStore('SOCKET_'+value, data);
+                    }
                 })
             })
     }
 
-
-    passToStore(event, payload): void {
-        if(!event.startsWith('SOCKET_')) {
-          return
+    public passToStore(event, payload): void {
+        if (!event.startsWith('SOCKET_')) {
+          return;
         }
 
-        for(let namespaced in this.store._mutations) {
-            let mutation = namespaced.split('/').pop()
-            if(mutation === event.toUpperCase()) this.store.commit(namespaced, payload)
+        for (let namespaced in this.store._mutations) {
+            let mutation = namespaced.split('/').pop();
+            if (mutation === event.toUpperCase()) {
+              this.store.commit(namespaced, payload);
+            }
         }
 
-        for(let namespaced in this.store._actions) {
-            let action = namespaced.split('/').pop()
-
-            if(!action.startsWith('socket_')) continue
+        for (let namespaced in this.store._actions) {
+            let action = namespaced.split('/').pop();
+            if (!action.startsWith('socket_')) {
+              continue;
+            }
 
             let camelcased = 'socket_'+event
                     .replace('SOCKET_', '')
                     .replace(/^([A-Z])|[\W\s_]+(\w)/g, (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase())
 
-            if(action === camelcased) this.store.dispatch(namespaced, payload)
+            if (action === camelcased) {
+              this.store.dispatch(namespaced, payload);
+            }
         }
     }
 }

src/Observer.ts

@@ -1,21 +1,24 @@
 import Emitter from './Emitter';
 
 export default class Sockets {
-    private _listeners: any;
-    private vm: any;
+    public _listeners: any;
+    public vm: any;
 
     constructor(vm: any) {
       this.vm = vm;
+      this._listeners = {};
     }
 
     get listeners(): any {
         return this._listeners;
     }
 
-    public listener(key: string, value?: string): void {
+    public listener(key: string, value?: any): void {
       if (!value) {
-        delete this._listeners;
-        Emitter.removeListener(key, this._listeners[key], this.vm);
+        if (this._listeners[key]) {
+          Emitter.removeListener(key, this._listeners[key], this.vm);
+          delete this._listeners[key];
+        }
         return;
       }
 

src/Sockets.ts

@@ -1,26 +1,25 @@
 import Observer from './Observer';
-
 import Sockets from './Sockets';
 
 export default {
-    install(Vue, connection, store) {
+    install(Vue: any, connection: any, store: any) {
         if(!connection) {
-          throw new Error("[Vue-Socket.io] cannot locate connection");
+          throw new Error("[vue-Socket-io] cannot locate connection");
         }
 
         let observer = new Observer(connection, store);
 
         Vue.prototype.$socket = observer.Socket;
 
         Vue.mixin({
-            created(){
+            created() {
                 let sockets = this.$options['sockets'];
 
                 this.$options.sockets = new Sockets(this);
 
                 if(sockets){
                     Object.keys(sockets).forEach((key) => {
-                        this.$options.sockets[key] = sockets[key];
+                        this.$options.sockets.listener(key, sockets[key]);
                     });
                 }
             },
@@ -29,7 +28,7 @@ export default {
 
                 if(sockets){
                     Object.keys(sockets).forEach((key) => {
-                        delete this.$options.sockets[key]
+                      this.$options.sockets.listener(key);
                     });
                 }
             }