Add reconnect (#25)

* add ws reconnect

* added in readme text about reconnect

README.md

@@ -51,6 +51,16 @@ import store from './store'
 Vue.use(VueNativeSock, 'ws://localhost:9090', { store: store, format: 'json' })
 ```
 
+Enable ws reconnect automatically:
+
+``` js
+Vue.use(VueNativeSock, 'ws://localhost:9090', { 
+  reconnection: true, // (Boolean) whether to reconnect automatically (false)
+  reconnectionAttempts: 5, // (Number) number of reconnection attempts before giving up (Infinity),
+  reconnectionDelay: 3000, // (Number) how long to initially wait before attempting a new (1000)
+})
+```
+
 #### On Vuejs instance usage
 
 ``` js
@@ -102,6 +112,8 @@ Update state in the open, close and error callbacks. You can also check the sock
 
 Handle all the data in the `SOCKET_ONMESSAGE` mutation.
 
+Reconect events will commit mutations `SOCKET_RECONNECT` and `SOCKET_RECONNECT_ERROR`.
+
 ``` js
 import Vue from 'vue'
 import Vuex from 'vuex'
@@ -113,6 +125,7 @@ export default new Vuex.Store({
     socket: {
       isConnected: false,
       message: '',
+      reconnectError: false,
     }
   },
   mutations:{
@@ -128,7 +141,14 @@ export default new Vuex.Store({
     // default handler called for all methods
     SOCKET_ONMESSAGE (state, message)  {
       state.message = message
-    }
+    },
+    // mutations for reconnect methods
+    [ws.WS_RECONNECT](state, count) {
+      console.info(state, count)
+    },
+    [ws.WS_RECONNECT_ERROR](state) {
+      state.socket.reconnectError = true;
+    },
   }
 })
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-native-websocket",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "native websocket implemantation for vuejs and vuex",
   "main": "dist/build.js",
   "scripts": {

src/Main.js

@@ -35,6 +35,7 @@ export default {
       },
       beforeDestroy () {
         let sockets = this.$options['sockets']
+        clearTimeout(observer.reconnectTimeoutId)
 
         if (sockets) {
           Object.keys(sockets).forEach((key) => {

src/Observer.js

@@ -3,7 +3,17 @@ import Emitter from './Emitter'
 export default class {
   constructor (connectionUrl, opts = {}) {
     this.format = opts.format && opts.format.toLowerCase()
+    this.connectionUrl = connectionUrl
+    this.opts = opts
+
+    this.reconnection = this.opts.reconnection || false
+    this.reconnectionAttempts = this.opts.reconnectionAttempts || Infinity
+    this.reconnectionDelay = this.opts.reconnectionDelay || 1000
+    this.reconnectTimeoutId = 0
+    this.reconnectionCount = 0
+
     this.connect(connectionUrl, opts)
+
     if (opts.store) { this.store = opts.store }
     this.onEvent()
   }
@@ -16,13 +26,36 @@ export default class {
         this.WebSocket.sendObj = (obj) => this.WebSocket.send(JSON.stringify(obj))
       }
     }
+
+    return this.WebSocket
+  }
+
+  reconnect () {
+    if (this.reconnectionCount <= this.reconnectionAttempts) {
+      this.reconnectionCount++
+      clearTimeout(this.reconnectTimeoutId)
+
+      this.reconnectTimeoutId = setTimeout(() => {
+        if (this.store) { this.passToStore('SOCKET_RECONNECT', this.reconnectionCount) }
+
+        this.connect(this.connectionUrl, this.opts)
+        this.onEvent()
+      }, this.reconnectionDelay)
+    } else {
+      if (this.store) { this.passToStore('SOCKET_RECONNECT_ERROR', true) }
+    }
   }
 
   onEvent () {
     ['onmessage', 'onclose', 'onerror', 'onopen'].forEach((eventType) => {
       this.WebSocket[eventType] = (event) => {
         Emitter.emit(eventType, event)
+
         if (this.store) { this.passToStore('SOCKET_' + eventType, event) }
+
+        if (this.reconnection && this.eventType === 'onopen') { this.reconnectionCount = 0 }
+
+        if (this.reconnection && eventType === 'onclose') { this.reconnect(event) }
       }
     })
   }