|
前端webscoket完成心跳
项目里面需要用到心跳功能，第一版使用延时器写的，发现并不能准时请求，于是用socket代替了，代码如下：
setHeartWs(){
// 因为传值用到了token，就这么取值了，不用可以去掉
console.log(this.tokenService.getPayload());
const token_:any = this.tokenService.getPayload();
let message = `${token_.userId}_${token_.clientIp}`;
let lockReconnect = false; // 避免重复连接
// 根据当前协议类型区分是ws还是wss
let protocol: any;
if (window.location.protocol === 'http:') {
protocol = window.location.protocol.replace('http', 'ws');
} else if (window.location.protocol === 'https:') {
protocol = window.location.protocol.replace('https', 'wss');
}
const host = window.location.host;
// 这是后台接口路径
const path = 'ping';
let ws:WebSocket;
// 定时器number
let tt = 0;
// 创建ws
function creatWs(){
try{
ws = new WebSocket(`${protocol}//${host}/${path}`);
init();
}catch(e){
// 如果出错重新连接
reconnect();
}
}
// 初始化
function init(){
ws.onopen = function(){
// 发送消息
ws.send(message);
// 心跳检测重置
heartCheck.start();
};
ws.onmessage = function(event){
// 心跳检测重置
heartCheck.start();
}
ws.onerror = function(event){
// 心跳检测重置
console.log('出错了');
}
}
// 重新连接
function reconnect() {
if(lockReconnect) {
return;
};
lockReconnect = true;
//没连接上会一直重连，设置延迟避免请求过多
// 清空延时器
tt && clearTimeout(tt);
tt = setTimeout(function () {
// 5秒后又继续创建连接
creatWs();
lockReconnect = false;
}, 5000);
}
//心跳检测
var heartCheck = {
timeout: 5000,
timeoutObj: null,
serverTimeoutObj: null,
start: function(){
var that = this;
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
this.timeoutObj = setTimeout(function(){
//这里发送一个心跳，后端收到后，返回一个心跳消息，
ws.send(message);//可以给后台发送参数
that.serverTimeoutObj = setTimeout(function() {
console.log(ws);
ws.close();
}, that.timeout);
}, this.timeout)
}
}
creatWs();
}
借鉴了网友的力量，加油啊。
|