更换重新连接为reconnecting-websocket库

This commit is contained in:
fangxiang 2021-12-22 10:37:18 +08:00
parent 54742f2d8d
commit 77ec933798
3 changed files with 28 additions and 78 deletions

View File

@ -16,6 +16,7 @@
"core-js": "^3.6.5", "core-js": "^3.6.5",
"element-resize-detector": "^1.2.3", "element-resize-detector": "^1.2.3",
"quasar": "^2.3.4", "quasar": "^2.3.4",
"reconnecting-websocket": "^4.4.0",
"v-viewer": "^3.0.9", "v-viewer": "^3.0.9",
"vue-i18n": "^9.0.0-beta.0", "vue-i18n": "^9.0.0-beta.0",
"vuex": "^4.0.1" "vuex": "^4.0.1"

View File

@ -1,4 +1,4 @@
import { ModeEntity } from "src/entities/ModeEntity"; import ReconnectingWebSocket from "reconnecting-websocket";
import NormalWindowRequestEntity from "src/entities/NormalWindowRequestEntity"; import NormalWindowRequestEntity from "src/entities/NormalWindowRequestEntity";
import { PlanEntity } from "src/entities/PlanEntity"; import { PlanEntity } from "src/entities/PlanEntity";
import { SignalSourceEntity } from "src/entities/SignalSourceEntity"; import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
@ -34,7 +34,7 @@ class _RpcInfo {
} }
export default class ClientConnection { export default class ClientConnection {
ws: WebSocket | null = null; ws: ReconnectingWebSocket | null = null;
url = ""; url = "";
user_name = ""; user_name = "";
password = ""; password = "";
@ -51,7 +51,17 @@ export default class ClientConnection {
user_name?: string | null, user_name?: string | null,
password?: string | null password?: string | null
) { ) {
this.reconnectTo(url, user_name, password); this.url = url;
this.user_name = user_name ?? "";
this.password = password ?? "";
if (this.ws) {
this.ws.close();
}
this.ws = new ReconnectingWebSocket(url);
this.initializeWs();
setInterval(() => { setInterval(() => {
this.checkRpcTimeout(); this.checkRpcTimeout();
}, 1000); }, 1000);
@ -65,39 +75,6 @@ export default class ClientConnection {
return this._is_login; return this._is_login;
} }
private _destoryWS() {
this._destoryed = true;
if (this.ws) {
this.ws.onclose = null;
this.ws.onerror = null;
this.ws.onopen = null;
this.ws.onmessage = null;
}
this.ws?.close();
this.ws = null;
}
public reconnectTo(
url: string,
user_name?: string | null,
password?: string | null
) {
if (this._destoryed) {
this._destoryWS();
return;
}
this.url = url;
this.user_name = user_name ?? "";
this.password = password ?? "";
if (this.ws) {
this.ws.close();
}
this.ws = new WebSocket(url);
this.initializeWs();
}
checkRpcTimeout() { checkRpcTimeout() {
const current_datetime = new Date().getTime(); const current_datetime = new Date().getTime();
this.rpc_map.forEach((v, k, m) => { this.rpc_map.forEach((v, k, m) => {
@ -126,65 +103,28 @@ export default class ClientConnection {
} }
login() { login() {
if (this._destoryed) {
this._destoryWS();
return;
}
if (this.is_connected) { if (this.is_connected) {
const request = new Protocol.LoginRequest(this.user_name, this.password); const request = new Protocol.LoginRequest(this.user_name, this.password);
this.ws?.send(JSON.stringify(request)); this.ws?.send(JSON.stringify(request));
} }
} }
onClose(ev: CloseEvent) { onClose(ev: any) {
this._is_login = false; this._is_login = false;
this._reconnect();
EventBus.getInstance().emit(EventNamesDefine.WebSocketClose, this); EventBus.getInstance().emit(EventNamesDefine.WebSocketClose, this);
} }
onError(ev: Event) { onError(ev: any) {
this._is_login = false; this._is_login = false;
this._reconnect();
EventBus.getInstance().emit(EventNamesDefine.WebSocketError, this); EventBus.getInstance().emit(EventNamesDefine.WebSocketError, this);
} }
private _reconnectTimer: ReturnType<typeof setTimeout> | null = null; onOpen(ev: any) {
private _reconnect() {
if (this._destoryed) {
this._destoryWS();
return;
}
if (
!this.ws ||
(this.ws.readyState != WebSocket.CONNECTING &&
this.ws.readyState != WebSocket.OPEN)
) {
if (this._reconnectTimer) {
clearTimeout(this._reconnectTimer);
this._reconnectTimer = null;
}
this._reconnectTimer = setTimeout(() => {
this.reconnectTo(this.url, this.user_name, this.password);
}, 3000);
}
}
onOpen(ev: Event) {
if (this._destoryed) {
this._destoryWS();
return;
}
this._is_login = false; this._is_login = false;
this.login(); this.login();
} }
onMessage(ev: MessageEvent) { onMessage(ev: MessageEvent) {
if (this._destoryed) {
this._destoryWS();
return;
}
try { try {
const packet = JSON.parse(ev.data) as Protocol.PacketEntity; const packet = JSON.parse(ev.data) as Protocol.PacketEntity;
@ -691,9 +631,13 @@ export default class ClientConnection {
this.ws?.send(JSON.stringify(new Protocol.RestartDeviceRequestEntity())); this.ws?.send(JSON.stringify(new Protocol.RestartDeviceRequestEntity()));
} }
private _destoryed = false;
public destory() { public destory() {
this._destoryed = true; if (this.ws) {
this.ws.onclose = null;
this.ws.onerror = null;
this.ws.onopen = null;
this.ws.onmessage = null;
}
this.ws?.close(); this.ws?.close();
this.ws = null; this.ws = null;
} }

View File

@ -6244,6 +6244,11 @@ readdirp@~3.6.0:
dependencies: dependencies:
picomatch "^2.2.1" picomatch "^2.2.1"
reconnecting-websocket@^4.4.0:
version "4.4.0"
resolved "https://registry.npm.taobao.org/reconnecting-websocket/download/reconnecting-websocket-4.4.0.tgz#3b0e5b96ef119e78a03135865b8bb0af1b948783"
integrity sha1-Ow5blu8RnnigMTWGW4uwrxuUh4M=
recursive-readdir@^2.1.0: recursive-readdir@^2.1.0:
version "2.2.2" version "2.2.2"
resolved "https://registry.npm.taobao.org/recursive-readdir/download/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f" resolved "https://registry.npm.taobao.org/recursive-readdir/download/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"