WebSocket断线重连

$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);
    }
}
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值