js websocket 心跳检测，断开重连，超时重连

Posted 2022-04-20 taxi

 1 function longSock(url, fn, intro = ‘‘) 
 2   let lockReconnect = false //避免重复连接
 3   let timeoutFlag = true
 4   let timeoutSet = null
 5   let reconectNum = 0
 6   const timeout = 30000 //超时重连间隔
 7   let ws
 8   function reconnect() 
 9     if (lockReconnect) return
10     lockReconnect = true
11     //没连接上会一直重连，设置延迟避免请求过多
12     if (reconectNum < 3) 
13       setTimeout(function() 
14         timeoutFlag = true
15         createWebSocket()
16         console.info(`$intro正在重连第$reconectNum + 1次`)
17         reconectNum++
18         lockReconnect = false
19       , 5000) //这里设置重连间隔(ms)
20     
21   
22   //心跳检测
23   const heartCheck = 
24     timeout: 5000, //毫秒
25     timeoutObj: null,
26     serverTimeoutObj: null,
27     reset: function() 
28       clearInterval(this.timeoutObj)
29       clearTimeout(this.serverTimeoutObj)
30       return this
31     ,
32     start: function() 
33       const self = this
34       let count = 0
35       this.timeoutObj = setInterval(() => 
36         if (count < 3) 
37           if (ws.readyState === 1) 
38             ws.send(‘HeartBeat‘)
39             console.info(`$introHeartBeat第$count + 1次`)
40           
41           count++
42          else 
43           clearInterval(this.timeoutObj)
44           count = 0
45           if (ws.readyState === 0 && ws.readyState === 1) 
46             ws.close()
47           
48         
49       , self.timeout)
50     
51   
52   const createWebSocket = () => 
53     console.info(`$intro创建11`)
54     timeoutSet = setTimeout(() => 
55       if (timeoutFlag && reconectNum < 3) 
56         console.info(`$intro重连22`)
57         reconectNum++
58         createWebSocket()
59       
60     , timeout)
61     ws = new WebSocket(url)
62 
63     ws.onopen = () => 
64       reconectNum = 0
65       timeoutFlag = false
66       clearTimeout(timeoutSet)
67       heartCheck.reset().start()
68     
69     ws.onmessage = evt => 
70       heartCheck.reset().start()
71       // console.info(evt);
72       if(evt.data === ‘HeartBeat‘) return
73       fn(evt, ws)
74     
75     ws.onclose = e => 
76       console.info(`$intro关闭11`, e.code)
77       if (e.code !== 1000) 
78         timeoutFlag = false
79         clearTimeout(timeoutSet)
80         reconnect()
81        else 
82         clearInterval(heartCheck.timeoutObj)
83         clearTimeout(heartCheck.serverTimeoutObj)
84       
85     
86     ws.onerror = function() 
87       console.info(`$intro错误11`)
88       reconnect() //重连
89     
90   
91   createWebSocket()
92   return ws
93 
94 export default longSock

 1  //方法调用
 2 const handler = (evt, ws) => 
 3    //evt 是 websockett数据
 4    //ws 是请求名称，方便关闭websocket        
 5  
 6 
 7  const wssCenter = createSocket(`wss://url`, handler, ‘接待中心-小卡片‘)
 8 
 9 
10 
11 wssCenter.close();  //断开连接