웹소켓 재연결 메커니즘 실현
생각
실례화된 웹socket 후, 우리는 각 리셋 이벤트가 실행해야 할 함수를 정의할 것이다
var ws = new WebSocket(url);
ws.onclose = function () {
//
};
ws.onerror = function () {
//
};
ws.onopen = function () {
//
};
ws.onmessage = function (event) {
//
}
약한 네트워크 환경에서 메시지를 보내면 수신단에 도착할 수 없다.또는 브라우저의 약정 시한까지 인터넷을 끊는 등 일부 이상 상황은 onclose와 onerror를 촉발하기 때문에 이론적으로 우리는 onclose와 onerror를 연결할 때 긴 연결을 다시 만들면 된다.
실현
위의 간단한 사고방식에 따라 코드는 다음과 같다.
var ws = new WebSocket(url);
ws.onclose = function () {
reconnect()
};
ws.onerror = function () {
reconnect()
};
function reconnect(url) {
setTimeout(function () { // ,
var ws = new WebSocket(url);
ws.onclose = function () {
reconnect()
};
ws.onerror = function () {
reconnect()
};
}, 2000);
}
조금만 추출하고 풍부하게,createWebSocket은 웹socket 실례를 만들고, initEventHandle은 각 리셋 함수를 연결합니다.
var ws = new WebSocket(url);
ws.onclose = function () {
reconnect()
};
ws.onerror = function () {
reconnect()
};
//
function reconnect(url) {
setTimeout(function () { // ,
createWebSocket(url);
}, 2000);
}
// websocket
function createWebSocket(url) {
try {
if ('WebSocket' in window) {
ws = new WebSocket(url);
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(url);
} else {
_alert(" websocket , ",3000)
}
initEventHandle();
} catch (e) {
reconnect(url);
}
}
//
function initEventHandle() {
ws.onclose = function () {
reconnect(wsUrl);
};
ws.onerror = function (err) {
reconnect(wsUrl);
};
}
최적화
약한 네트워크, 연결이 끊어지면 다시 연결되는 것은 수동적인 것이고 일반적인 웹socket 연결에는 심장 박동 메커니즘이 존재한다. 클라이언트와 서비스 측은 특정한 심장 박동 메시지를 약속하여 체인이 정상적으로 통신하는지 검사하는 데 사용한다.우리는 심장 박동 메커니즘을 통해 클라이언트가 체인의 정상을 측정하고 약정된 시간 간격 내에 심장 박동이나 다른 통신 메시지를 받지 못할 때 클라이언트가 주동적으로 다시 연결한다.따라서 다음 최적화된 방법은 심장 박동 측정 방법을 추가해야 한다.
var heartCheck = {
timeout: heartBeatTime*1000, //
timeoutObj: null, //
reset: function () { //
clearTimeout(this.timeoutObj);
return this;
},
start: function () { //
var self = this;
this.timeoutObj = setTimeout(function () {
// , ,
ws.close();
},this.timeout)
}
}
하트비트 체크 객체, 정의됨
//
function initEventHandle() {
ws.onclose = function () {
reconnect(wsUrl);
};
ws.onerror = function (err) {
reconnect(wsUrl);
};
ws.onopen = function () {
heartCheck.reset().start(); //
};
ws.onmessage = function (msg) { // ,
heartCheck.reset().start(); //
handleMsg(msg)
};
}
동시에 여러 차례 중련된 문제를 일으키다
실제 사용 과정에서 일부 브라우저를 발견하면reconnect 리셋은 여러 번 터치할 수 있기 때문에 리셋에 자물쇠를 추가해야 합니다. 리셋이 실행 중일 때 다시 터치할 수 없습니다.
function reconnect(url) {
if (reconnect.lockReconnect) return;
reconnect.lockReconnect = true;
setTimeout(function () { // ,
createWebSocket(url);
reconnect.lockReconnect = false;
}, 2000);
}
같은 브라우저에서 여러 페이지가 하나의 연결로 통신을 하려면 브라우저 캐시/데이터 루트 (local Storage/indexed DB) 를 사용하여 이 자물쇠를 추가해야 합니다.
참고
1, MDN Websockt 2, 웹소켓 심박수 재연결 초기 탐색 및 구현
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.