websocket heartbeat packet encapsulated using vue

This code can be used directly past some of the attention I get comments will be added in the following code:

Thank you for support

Core code

1  // It should be incorporated vuex 
2 Import from Store './store' ;
 . 3  
. 4 the let wsConnection = {
 . 5    $ WS: null ,
 . 6    lockReturn: to false ,
 . 7    timeout: 60 *. 5 * 1000 ,
 . 8    timeoutObj: null ,
 . 9    timeoutNum : null ,
 10    serverTimeoutObj: null ,
 . 11    // initialize webSocket long link 
12 is    initWebSocket: function () {
 13 is     corpId = localStorage.getItem the let ( 'corpId' );
 14      the let name = localStorage.getItem ( 'username' );
 15      the this $ = WS. new new a WebSocket (wsurl); // write address the address where the method can be added initWebSocket parameter 
16      the this . = $ ws.onopen the this .wsOpen;
 . 17      the this . = $ ws.onclose the this .wsClose;
 18 is      the this $ = ws.onmessage. the this .wsMsg;
 . 19      the this . = $ ws.onerror the this .wsError;
 20 is    },
 21    // open WebSocket 
22 is    wsOpen:function (E) {
 23 is      // Start heartbeat websocket 
24      wsConnection.startWsHeartbeat ();
 25      the console.log ( 'WS Success' )
 26 is    },
 27    wsClose: function (E) {
 28      the console.log (E, 'WS Close' )
 29    },
 30    wsMsg: function (MSG) {
 31 is      // after each received message to the server to reset the heartbeat websocket 
32      wsConnection.resetHeartbeat ();
 33 is      // message sent by the server to the deposit to vuex 
34 is      store.commit ( 'web_socket_msg' , MSG)
 35    },
 36   wsError: function (err) {
37     console.log(err, 'ws error');
38     wsConnection.reconnect()
39   },
40   //重启websocket
41   reconnect: function () {
42     let _this = this;
43     if (_this.lockReturn) {
44       return;
45     }
46     _this.lockReturn = true;
47     _this.timeoutNum && clearTimeout(_this.timeoutNum);
48     _this.timeoutNum = setTimeout(function () {
49       _this.initWebSocket();
50       _this.lockReturn = false;
51     }, 3000);
52   },
53   startWsHeartbeat: function () {
54     let _this = this;
55     _this.timeoutObj && clearTimeout(_this.timeoutObj);
56     _this.serverTimeoutObj && clearTimeout(_this.serverTimeoutObj);
57     _this.timeoutObj = setInterval(function () {
58       //判断websocket当前状态
59       if (_this.$ws.readyState != 1) {
60         _this.reconnect()
61       }
62     }, _this.timeout);
63   },
64   //重置websocket心跳
65   resetHeartbeat: function () {
66     let _this = this;
67     clearTimeout(_this.timeoutObj);
68     clearTimeout(_this.serverTimeoutObj);
69     _this.startWsHeartbeat()
70   }
71 };
72 
73 //抛出websocket对象
74 export default wsConnection

websocket method calls

1  // In the introduction main.js 
2 Import from wsConnection './vuex/wsStore'
 . 3  // mount vue prototype chain 
. 4 Vue.prototype = $ setWs. WsConnection;
 . 5  
. 6  // call the local use 
. 7   $ the this $. setWs.initWebSocket ();
 . 8  
. 9  // when needed to use the service side push message over 
10  // the computed method declaration 
. 11  getWsMsg () {
 12 is     // the core code of the received information is stored into the server attributes vuex 
13      return  the this . store.state.webSocketMsg $
 14  }
 15  // in the method of listening watch getWsMsg   
16  getWsMsg: function (data, val) {
17    console.log(data);
18    //.......
19 }

This code-based blogger original, reproduced please indicate the source (to support the original! Thank you ~)

Minato words ~ Minato words ~ Minato words ~ Minato words ~ Minato words ~ Minato words ~ Minato words ~ Minato words ~ Minato words ~ Minato words ~ Minato words ~ Minato words ~ Minato words ~ Minato words ~ Minato words ~ Minato words ~ Minato words Minato words ~ ~ ~ Minato words Minato words Minato words ~ ~ ~ Minato words

websocket heartbeat packet encapsulated using vue

Guess you like