2.1.0

Author: metinseylan

README.md

@@ -1,33 +1,39 @@
 # Vue-Socket.io
-socket.io implemantation for Vuejs 2.0 and 1.0
 
-## Install
+[![NPM version](https://img.shields.io/npm/v/vue-socket.io.svg)](https://www.npmjs.com/package/vue-socket.io)
+![VueJS v2 compatible](https://img.shields.io/badge/Vuejs%202-compatible-green.svg)
+<a href="https://www.npmjs.com/package/vue-socket.io"><img src="https://img.shields.io/npm/dt/vue-socket.io.svg" alt="Downloads"></a>
+<img id="dependency_badge" src="https://www.versioneye.com/javascript/metinseylan:vue-socket.io/2.0.1/badge.svg" alt="Dependency Badge" rel="nofollow">
+<a href="https://www.npmjs.com/package/vue-socket.io"><img src="https://img.shields.io/npm/l/vue-socket.io.svg" alt="License"></a>
 
-  ``` bash
-  npm install vue-socket.io --save
-  ```
-  for Vue 1.0
+socket.io implemantation for Vuejs 2 and Vuex
 
-  ``` bash
-  npm install vue-socket.io@1.0.2 --save
-  ```
+## Install
 
-## Usage
+``` bash
+npm install vue-socket.io --save
+```
 
+## Usage
+##### Configration
+Automaticly socket connect from url string
 ``` js
-import Vue from 'vue';
-import VueSocketio from 'vue-socket.io';
-
-Vue.use(VueSocketio, 'http://socketserver.com:1923'); // Automaticly socket connect from url string
-
-/*
-  import socketio from 'socket.io-client';
+Vue.use(VueSocketio, 'http://socketserver.com:1923');
+```
 
-  var ioInstance = socketio('http://socketserver.com:1923');
+Bind custom socket.io-client instance
+``` js
+Vue.use(VueSocketio, socketio('http://socketserver.com:1923'));
+```
 
-  Vue.use(VueSocketio, ioInstance); // bind custom socketio instance
-*/
+Enable Vuex integration
+``` js
+import store from './yourstore'
+Vue.use(VueSocketio, socketio('http://socketserver.com:1923'), store);
+```
 
+##### On Vuejs instance usage
+``` js
 var vm = new Vue({
   sockets:{
     connect: function(){
@@ -46,10 +52,48 @@ var vm = new Vue({
 })
 ```
 
+##### Dynamic socket event listenlers
+Create new listenler
+``` js
+this.$options.sockets.event_name = (data) => {
+    console.log(data)
+}
+```
+Remove exist listenler
+``` js
+delete this.$options.sockets.event_name;
+```
+
+##### Vuex Store integration
+Example store, socket mutations always have "SOCKET_" prefix
+``` js
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    state: {
+        connect: false,
+        message: null
+    },
+    mutations:{
+        SOCKET_CONNECT: (state,  status ) => {
+            state.connect = true;
+        },
+        SOCKET_USER_MESSAGE: (state,  message) => {
+            state.message = message;
+        }
+    },
+    actions: {
+        otherAction: ({ commit, dispatch, state }, type) => {
+            return true;
+        }
+    }
+})
+```
+
 ## Example
 [Realtime Car Tracker System](http://metinseylan.com/)
 
 [Simple Chat App](http://metinseylan.com/vuesocketio/)
-
-## License
-[WTFPL](http://www.wtfpl.net/)

dist/build.js

@@ -1,10 +1,10 @@
 {
   "name": "vue-socket.io",
-  "version": "2.0.1",
-  "description": "socket.io implemantation for vuejs",
+  "version": "2.1.0",
+  "description": "socket.io implemantation for vuejs and vuex",
   "main": "dist/build.js",
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "build": "webpack --progress --hide-modules"
   },
   "repository": {
     "type": "git",
@@ -14,9 +14,13 @@
     "vuejs",
     "socket",
     "vue",
-    "socket",
     "socket.io",
-	"comolokko"
+    "websocket",
+    "socket.io-client",
+    "realtime",
+    "flux",
+    "vuex",
+    "redux"
   ],
   "author": "Metin Seylan",
   "license": "MIT",
@@ -31,8 +35,6 @@
     "babel-cli": "^6.11.4",
     "babel-loader": "^6.2.5",
     "babel-preset-es2015": "^6.3.13",
-    "babel-preset-stage-0": "^6.3.13",
-    "cross-env": "^2.0.0",
-    "webpack": "^1.13.2"
+    "webpack": "^2.2.0-rc.3"
   }
 }

dist/build.js.map

@@ -45,4 +45,5 @@ export default new class {
         }
         return false;
     }
+
 }

package.json

@@ -3,38 +3,50 @@ import Emitter from './Emitter'
 
 export default {
 
-    install(Vue, connection){
+    install(Vue, connection, store){
 
         if(!connection) throw new Error("[Vue-Socket.io] cannot locate connection")
 
-        let observer = new Observer(connection)
+        let observer = new Observer(connection, store)
 
         Vue.prototype.$socket = observer.Socket;
 
         Vue.mixin({
             beforeCreate(){
-                let _this = this;
                 let sockets = this.$options['sockets']
 
+                this.$options.sockets = new Proxy({}, {
+                    set: (target, key, value) => {
+                        Emitter.addListener(key, value, this)
+                        target[key] = value
+                        return true;
+                    },
+                    deleteProperty: (target, key) => {
+                        Emitter.removeListener(key, this.$options.sockets[key], this)
+                        delete target.key;
+                        return true
+                    }
+                })
+
                 if(sockets){
-                    Object.keys(sockets).forEach(function(key) {
-                        Emitter.addListener(key, sockets[key], _this)
+                    Object.keys(sockets).forEach((key) => {
+                        this.$options.sockets[key] = sockets[key];
                     });
                 }
-
             },
             beforeDestroy(){
-                let _this = this;
                 let sockets = this.$options['sockets']
 
                 if(sockets){
-                    Object.keys(sockets).forEach(function(key) {
-                        Emitter.removeListener(key, sockets[key], _this)
+                    Object.keys(sockets).forEach((key) => {
+                        delete this.$options.sockets[key]
                     });
                 }
             }
         })
 
     }
 
-}
+}
+
+

src/Emitter.js

@@ -3,31 +3,49 @@ import Socket from 'socket.io-client'
 
 export default class{
 
-    constructor(connection) {
+    constructor(connection, store) {
 
         if(typeof connection == 'string'){
             this.Socket = Socket(connection);
         }else{
             this.Socket = connection
         }
 
+        if(store) this.store = store;
+
         this.onEvent()
 
     }
 
     onEvent(){
         this.Socket.onevent = (packet) => {
-            Emitter.emit(packet.data[0], packet.data[1])
-        }
+            Emitter.emit(packet.data[0], packet.data[1]);
+
+            if(this.store) this.commitStore('SOCKET_'+packet.data[0], packet.data[1])
+
+        };
 
         let _this = this;
 
         ["connect", "error", "disconnect", "reconnect", "reconnect_attempt", "reconnecting", "reconnect_error", "reconnect_failed", "connect_error", "connect_timeout", "connecting", "ping", "pong"]
             .forEach((value) => {
                 _this.Socket.on(value, (data) => {
-                    Emitter.emit(value, data)
+                    Emitter.emit(value, data);
+                    if(_this.store) _this.commitStore('SOCKET_'+value.toUpperCase(), data)
                 })
             })
     }
 
+
+    commitStore(type, payload){
+
+        if(type.split('_')[0].toUpperCase() === 'SOCKET'){
+
+            if(this.store._mutations[type])
+                this.store.commit(type, payload)
+
+        }
+
+    }
+
 }

src/Main.js

@@ -8,43 +8,24 @@ module.exports = {
         library: ['VueSocketio'],
         libraryTarget: 'umd'
     },
-    resolveLoader: {
-        root: path.join(__dirname, 'node_modules'),
-    },
+    devtool: "source-map",
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        })
+    ],
     module: {
         loaders: [
             {
                 test: /\.js$/,
-                loader: 'babel',
                 exclude: /node_modules/,
-				query: {
-				  presets: ['es2015']
-				}
-            },
-            {
-                test: /\.json$/,
-                loader: 'json'
+                loader: 'babel-loader',
+                query: {
+                    presets: ['es2015']
+                }
             }
         ]
-    },
-    devtool: 'eval-source-map'
-}
-
-if (process.env.NODE_ENV === 'production') {
-    module.exports.devtool = 'source-map'
-
-    module.exports.plugins = (module.exports.plugins || []).concat([
-        new webpack.DefinePlugin({
-            'process.env': {
-                NODE_ENV: '"production"'
-            }
-        }),
-        new webpack.optimize.UglifyJsPlugin({
-            compress: {
-                warnings: false
-            }
-        }),
-        new webpack.optimize.OccurenceOrderPlugin()
-    ])
-}
-
+    }
+}