添加开窗口功能

src/common/ClientConnection.ts

@@ -38,6 +38,9 @@ export default class ClientConnection {
     user_name?: string | null,
     password?: string | null
   ) {
+    if (this._destoryed) {
+      return;
+    }
     this.url = url;
     this.user_name = user_name ?? "";
     this.password = password ?? "";
@@ -77,13 +80,36 @@ export default class ClientConnection {
   onClose(ev: CloseEvent) {
     this._is_login = false;
     console.log("onClose");
+    this._reconnect();
+    EventBus.getInstance().emit(EventNamesDefine.WebSocketClose, this);
   }
 
   onError(ev: Event) {
     this._is_login = false;
-    setTimeout(() => {
+    this._reconnect();
+    EventBus.getInstance().emit(EventNamesDefine.WebSocketError, this);
+  }
+
+  private _reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+
+  private _reconnect() {
+    if (this._destoryed) {
+      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(() => {
+        console.log("reconnection...", new Date().getSeconds());
         this.reconnectTo(this.url, this.user_name, this.password);
-    }, 5000);
+      }, 3000);
+    }
   }
 
   onOpen(ev: Event) {
@@ -111,6 +137,12 @@ export default class ClientConnection {
               if (login_response) {
                 this._is_login =
                   !login_response.has_exception && login_response.success;
+                if (this.is_login) {
+                  EventBus.getInstance().emit(
+                    EventNamesDefine.WebSocketConnected,
+                    this
+                  );
+                }
                 if (
                   this.login_callback &&
                   typeof this.login_callback == "function"
@@ -118,8 +150,7 @@ export default class ClientConnection {
                   this.login_callback(this._is_login);
                 }
               }
-            }
+            } else if (this.rpc_map.has(packet.rpc_id)) {
-            if (this.rpc_map.has(packet.rpc_id)) {
               const f = this.rpc_map.get(packet.rpc_id);
               if (f && typeof f == "function") {
                 f(false, packet, ev.data);
@@ -232,4 +263,15 @@ export default class ClientConnection {
       JSON.stringify(new Protocol.CloseWindowRequestEntity(window_id))
     );
   }
+
+  public openWindow(data: Protocol.OpenWindowRequestEntity) {
+    this.ws?.send(JSON.stringify(data));
+  }
+
+  private _destoryed = false;
+  public destory() {
+    this._destoryed = true;
+    this.ws?.close();
+    this.ws = null;
+  }
 }

src/common/EventBus.ts

@@ -12,7 +12,12 @@ export default class EventBus extends EventEmitter {
 }
 
 export namespace EventNamesDefine {
-  export const UnSelectAllWindows = "unselect_all_windows";
+  export const UnSelectAllWindows = "onUnSelectAllWindows";
-  export const WindowResize = "windowResize";
+  export const WindowResize = "onWindowResize";
   export const ResponseMessage = "onResponseData";
+  export const WebSocketClose = "onWebSocketClose";
+  export const WebSocketError = "onWebSocketError";
+  export const WebSocketConnected = "onWebSocketConnected";
+  export const CurrentConnectDisconnect = "onCurrentConnectDisconnect";
+  export const CurrentConnectConnected = "onCurrentConnectConnected";
 }

src/common/GlobalData.ts

@@ -2,11 +2,11 @@ import { SessionStorage } from "quasar";
 import ApplicationConfigEntity from "src/entities/ApplicationConfigEntity";
 import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
 import ClientConnection from "./ClientConnection";
+import EventBus, { EventNamesDefine } from "./EventBus";
 
 export default class GlobalData {
   getSignalSource(uuid: string) {
     return this.signal_source.find((item) => item && item.uuid == uuid);
-    throw new Error("Method not implemented.");
   }
   private static _instance: GlobalData | null = null;
 
@@ -70,6 +70,43 @@ export default class GlobalData {
         new ClientConnection(url, user_name, password)
       );
     }
+
+    EventBus.getInstance().on(EventNamesDefine.WebSocketClose, (connection) =>
+      this._onWebSocketClose(connection)
+    );
+    EventBus.getInstance().on(EventNamesDefine.WebSocketError, (connection) =>
+      this._onWebSocketError(connection)
+    );
+
+    EventBus.getInstance().on(
+      EventNamesDefine.WebSocketConnected,
+      (connection) => this._onWebSocketConnected(connection)
+    );
+  }
+
+  private _onWebSocketClose(connection: ClientConnection) {
+    if (this.getCurrentClient() == connection) {
+      EventBus.getInstance().emit(
+        EventNamesDefine.CurrentConnectDisconnect,
+        connection
+      );
+    }
+  }
+  private _onWebSocketError(connection: ClientConnection) {
+    if (this.getCurrentClient() == connection) {
+      EventBus.getInstance().emit(
+        EventNamesDefine.CurrentConnectDisconnect,
+        connection
+      );
+    }
+  }
+  private _onWebSocketConnected(connection: ClientConnection) {
+    if (this.getCurrentClient() == connection) {
+      EventBus.getInstance().emit(
+        EventNamesDefine.CurrentConnectConnected,
+        connection
+      );
+    }
   }
 
   public getClient(name: string | null) {

src/entities/WSProtocol.ts

@@ -223,9 +223,20 @@ export namespace Protocol {
     y: number = 0;
     width: number = 0;
     height: number = 0;
-    constructor() {
+    constructor(
+      signal_source: string,
+      x: number,
+      y: number,
+      width: number,
+      height: number
+    ) {
       super();
       this.command = Commands.kOpenWindow;
+      this.signal_source = signal_source ?? "";
+      this.x = x ?? 0;
+      this.y = y ?? 0;
+      this.width = width ?? 0;
+      this.height = height ?? 0;
     }
   }
 

src/i18n/zh-CN/index.ts

@@ -10,7 +10,11 @@ export default {
   password: "密码",
   "please input user name": "请输入用户",
   "please input password": "请输入密码",
-  "login fail!": "登陆失败",
+  "login fail!": "登陆失败！",
+  "user or password error!": "用户名或密码错误！",
+  "connect time out!": "连接超时",
+  "please check server state, or check server ip address!":
+    "请检查服务器状态，或者检查服务器IP地址是否正确！",
   "Please type something": "请输入内容",
 
   "grid setting": "宫格设置",
@@ -23,4 +27,7 @@ export default {
   "close all windwos": "关闭所有窗口",
   "close this window": "关闭当前窗口",
   "close other windows": "关闭其它窗口",
+
+  "network disconnect!": "网络连接断开!",
+  "wait reconnection": "等待重连中",
 };

src/pages/Index.vue

@@ -5,13 +5,29 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
-import WallPage from 'src/pages/WallPage.vue';
+import WallPage from "src/pages/WallPage.vue";
+import EventBus, { EventNamesDefine } from "src/common/EventBus";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
-  name: 'PageIndex',
+  name: "PageIndex",
   components: { WallPage },
   setup() {
+    const $q = useQuasar();
+    const $t = useI18n();
+
+    EventBus.getInstance().on(EventNamesDefine.CurrentConnectDisconnect, () => {
+      $q.loading.show({
+        message:
+          $t.t("network disconnect!") + $t.t("wait reconnection") + "...",
+      });
+    });
+
+    EventBus.getInstance().on(EventNamesDefine.CurrentConnectConnected, () => {
+      $q.loading.hide();
+    });
     return {};
   },
 });

src/pages/Login.vue

@@ -15,7 +15,9 @@
               class="q-gutter-md"
             >
               <q-input
+                autofocus
                 :loading="data.loading"
+                :disable="data.loading"
                 filled
                 v-model="data.user_name"
                 :label="$t('user name')"
@@ -46,7 +48,9 @@
               <q-input
                 ref="password_input"
                 :loading="data.loading"
+                :disable="data.loading"
                 filled
+                :type="data.show_password ? '' : 'password'"
                 v-model="data.password"
                 :label="$t('password')"
                 :hint="$t('please input password')"
@@ -64,6 +68,11 @@
                 "
               >
                 <template v-if="data.password" v-slot:append>
+                  <q-icon
+                    :name="data.show_password ? 'visibility' : 'visibility_off'"
+                    class="cursor-pointer"
+                    @click="data.show_password = !data.show_password"
+                  />
                   <q-icon
                     name="cancel"
                     @click.stop="data.password = null"
@@ -104,6 +113,7 @@ class _Data {
   password: string | null = null;
   loading = false;
   ip_address = "127.0.0.1";
+  show_password = false;
 
   constructor() {
     let temp = LocalStorage.getItem("default_ip_address");
@@ -135,7 +145,7 @@ export default defineComponent({
     const $t = useI18n();
     const $route = useRouter();
     const data = reactive(new _Data());
-
+    let web_socket: ClientConnection | null = null;
     return {
       data,
       loga(a: any) {
@@ -146,26 +156,41 @@ export default defineComponent({
           data.loading = true;
           try {
             let global_data = GlobalData.getInstance();
-            let web_socket = global_data.getClient(data.ip_address);
             const url =
               "ws://" +
               data.ip_address +
               ":" +
               GlobalData.kDefaultWebsocektPort.toString() +
               GlobalData.kWebsocketResource;
-            if (web_socket) {
-              web_socket.reconnectTo(url, data.user_name, data.password);
-            } else {
             web_socket = new ClientConnection(
               url,
               data.user_name,
               data.password
             );
-              global_data.addClient(data.ip_address, web_socket);
+            let timer = setTimeout(() => {
-            }
+              web_socket?.destory();
-            global_data.setCurrentClientName(data.ip_address);
+              web_socket = null;
+              $q.notify({
+                color: "negative",
+                icon: "warning",
+                message:
+                  $t.t("login fail!") +
+                  $t.t("connect time out!") +
+                  $t.t(
+                    "please check server state, or check server ip address!"
+                  ),
+                position: "center",
+                timeout: 1500,
+              });
+              SessionStorage.set("auth", PermissionLevel.None);
+              resolve(false);
+              data.loading = false;
+            }, 5000);
             web_socket.login_callback = (is_login) => {
-              if (is_login) {
+              clearTimeout(timer);
+              if (is_login && web_socket) {
+                global_data.addClient(data.ip_address, web_socket);
+                global_data.setCurrentClientName(data.ip_address);
                 SessionStorage.set("auth", PermissionLevel.Root);
                 SessionStorage.set("url", url);
                 SessionStorage.set("name", data.ip_address);
@@ -176,7 +201,8 @@ export default defineComponent({
                 $q.notify({
                   color: "negative",
                   icon: "warning",
-                  message: $t.t("login fail!"),
+                  message:
+                    $t.t("login fail!") + $t.t("user or password error!"),
                   position: "center",
                   timeout: 1500,
                 });

src/pages/WallPage.vue

@@ -301,7 +301,6 @@ export default defineComponent({
                     const window = $store.state.windows.find(
                       (item) => item.window_id == temp.window_id
                     );
-                    console.log(window);
                     if (window) {
                       $store.commit("setWindowPropertys", [
                         {
@@ -369,7 +368,24 @@ export default defineComponent({
 
           if (signal_sources.length) {
             let signal_source = signal_sources[0];
-            console.log(signal_source);
+            if (signal_source) {
+              const dom = e.target as HTMLElement;
+              if (dom) {
+                GlobalData.getInstance()
+                  .getCurrentClient()
+                  ?.openWindow(
+                    new Protocol.OpenWindowRequestEntity(
+                      signal_source.uuid,
+                      (dom.offsetLeft - (wall.value?.offsetLeft ?? 0)) *
+                        wall_width_scaler.value,
+                      (dom.offsetTop - (wall.value?.offsetTop ?? 0)) *
+                        wall_height_scaler.value,
+                      dom.offsetWidth * wall_width_scaler.value,
+                      dom.offsetHeight * wall_height_scaler.value
+                    )
+                  );
+              }
+            }
           }
         }
       },