WebSocket断线重连 小咪咪 2021-09-30 15:22 340阅读 0赞 $scope.timeout = 10800,//3分钟发一次心跳 $scope.timeoutObj = null, $scope.serverTimeoutObj = null, $scope.init = function() \{ $scope.lockReconnect = false, $scope.wsUrl = "wss://xxx:8888"; // 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 window.onbeforeunload = function() \{ ws.close(); \} //创建WebSocket对象 $scope.createWebSocket = function() \{ try \{ if(window.WebSocket || window.MozWebSocket) \{ ws = new WebSocket($scope.wsUrl); \} $scope.initEventHandle(); \} catch(e) \{ $scope.reconnectWebSocket($scope.wsUrl); \} \}, $scope.initEventHandle = function() \{ /\*\*\* 连接建立时触发 \*/ ws.onopen = function(e) \{ //发送登录信息 msg = new Object(); ws.send('xxx'); $scope.heartCheckWebSocket(); //心跳检测重置 \}; ws.onmessage = function(e) \{ $scope.heartCheckWebSocket(); //如果获取到消息,心跳检测重置 //拿到任何消息都说明当前连接是正常的 $scope.handMsg(e.data); \}; ws.onclose = function(e) \{ $scope.reconnectWebSocket($scope.wsUrl); //console.log("服务器拒绝了连接. 请检查服务器是否启动"); \}; ws.onerror = function(e) \{ $scope.reconnectWebSocket($scope.wsUrl); //console.log("连接已断开,请刷新页面重新登录。"); \}; \}, //处理消息 $scope.handMsg = function(eventData) \{ if(!eventData) return; if(eventData == "close") \{ $scope.reconnectWebSocket($scope.wsUrl); //这里要注意onclose的第一个参数必须是1000或者3000—4999 //console.log("服务器通知关闭"); \} else \{ //这里收到后端返回一个心跳消息,如果data返回空,则说明连接正常,到此停止处理 //这里是你要写的逻辑代码 \} \}, //重连 $scope.reconnectWebSocket = function() \{ if($scope.lockReconnect) return; $scope.lockReconnect = true; setTimeout(function() \{ $scope.createWebSocket(wsUrl); $scope.lockReconnect = false; \}, 2000); \}, //心跳检测 $scope.heartCheckWebSocket = function() \{ //重置 $timeout.cancel($scope.timeoutObj); $timeout.cancel($scope.serverTimeoutObj); //开启 $scope.timeoutObj = $timeout(function() \{ //这里发送一个心跳,后端收到后,返回一个心跳消息, //onmessage拿到返回的心跳就说明连接正常 //发送登录信息 msg = new Object(); ws.send('xxx'); $scope.serverTimeoutObj = $timeout(function() \{ //如果超过一定时间还没重置,说明后端主动断开了 //如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次 ws.close(); \}, $scope.timeout); \}, $scope.timeout); \} \}
还没有评论,来说两句吧...