更换重新连接为reconnecting-websocket库

package.json

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

src/common/ClientConnection.ts

@@ -1,4 +1,4 @@
-import { ModeEntity } from "src/entities/ModeEntity";
+import ReconnectingWebSocket from "reconnecting-websocket";
 import NormalWindowRequestEntity from "src/entities/NormalWindowRequestEntity";
 import { PlanEntity } from "src/entities/PlanEntity";
 import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
@@ -34,7 +34,7 @@ class _RpcInfo {
 }
 
 export default class ClientConnection {
-  ws: WebSocket | null = null;
+  ws: ReconnectingWebSocket | null = null;
   url = "";
   user_name = "";
   password = "";
@@ -51,7 +51,17 @@ export default class ClientConnection {
     user_name?: 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(() => {
       this.checkRpcTimeout();
     }, 1000);
@@ -65,39 +75,6 @@ export default class ClientConnection {
     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() {
     const current_datetime = new Date().getTime();
     this.rpc_map.forEach((v, k, m) => {
@@ -126,65 +103,28 @@ export default class ClientConnection {
   }
 
   login() {
-    if (this._destoryed) {
-      this._destoryWS();
-      return;
-    }
     if (this.is_connected) {
       const request = new Protocol.LoginRequest(this.user_name, this.password);
       this.ws?.send(JSON.stringify(request));
     }
   }
 
-  onClose(ev: CloseEvent) {
+  onClose(ev: any) {
     this._is_login = false;
-    this._reconnect();
     EventBus.getInstance().emit(EventNamesDefine.WebSocketClose, this);
   }
 
-  onError(ev: Event) {
+  onError(ev: any) {
     this._is_login = false;
-    this._reconnect();
     EventBus.getInstance().emit(EventNamesDefine.WebSocketError, this);
   }
 
-  private _reconnectTimer: ReturnType<typeof setTimeout> | null = null;
-
-  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;
-    }
-
+  onOpen(ev: any) {
     this._is_login = false;
     this.login();
   }
 
   onMessage(ev: MessageEvent) {
-    if (this._destoryed) {
-      this._destoryWS();
-      return;
-    }
     try {
       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()));
   }
 
-  private _destoryed = false;
   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 = null;
   }

yarn.lock

@@ -6244,6 +6244,11 @@ readdirp@~3.6.0:
   dependencies:
     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:
   version "2.2.2"
   resolved "https://registry.npm.taobao.org/recursive-readdir/download/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"