【WebSocket断线重连】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 =https://www.it610.com/article/="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);
}
}
推荐阅读
- websocket|android中如何使用websocket，以及用nodejs做后台的实例
- WebSocket安卓客户端实现详解(一)--连接建立与重连
- WebSocket实现多房间聊天室
- webSocket断线重连（不需要心跳 ，纯前端 无需后端 超级简单）
- websocket|go websocket 群组聊天+基于数据大屏推送技术
- PHP|初次使用swoole遇到的问题
- java|springboot-websocket 实现