React中项目需要使用websockt的重连机制
useEffect(() => {
let webSocket = null;
let lockReconnect = false; // 是否真正建立连接
let timeout = 20 * 1000; // 20秒一次心跳,可更改实际需求需要的时间
let timeoutObj = null;
let serverTimeoutObj = null;
let timeoutNum = null;
const start = () => { // 开启心跳
timeoutObj && clearTimeout(timeoutObj);
// serverTimeoutObj && clearTimeout(serverTimeoutObj);
timeoutObj = setTimeout(function () {
if (webSocket.readyState === 1) {//连接正常
webSocket.send('hello');
} else {
reconnect();
}
// serverTimeoutObj = setTimeout(function () {
// // 超时关闭
// webSocket.close();
// }, timeout);
}, timeout)
};
const reset = () => { // 重置心跳
// 清除时间
clearTimeout(timeoutObj);
// clearTimeout(serverTimeoutObj);
// 重启心跳
start();
};
const reconnect = () => { // 重新连接
console.log('reconnect', lockReconnect);
if (lockReconnect) {
return;
};
lockReconnect = true;
// 没连接上会一直重连,设置延迟避免请求过多
timeoutNum && clearTimeout(timeoutNum);
timeoutNum = setTimeout(function () {
// 新连接
initWebSocket();
lockReconnect = false;
}, 5000);
};
const initWebSocket = () => {
webSocket = new WebSocket('ws://***********');
webSocket.onopen = () => {
console.log('open...');
start();
};
webSocket.onclose = () => {
console.log('close...');
reconnect();
};
webSocket.onerror = () => {
console.log('error...');
// reconnect();
};
webSocket.onmessage = (result) => {
const { data } = result;
reset();
if (data === 'new connection into') {
console.log('data---', data);
return;
}
const msg = JSON.parse(data);
console.log('获取的数据', msg)
}
};
};
initWebSocket();
return () => {
webSocket.close();
};
}, []);