feat: close connect while leave ws tab

Postcatlab · Sep 9, 2022 · 975910b · 975910b
1 parent e2eb7bb
commit 975910b
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 28 deletions.
diff --git a/src/workbench/browser/src/app/pages/api/tab/api-tab.component.ts b/src/workbench/browser/src/app/pages/api/tab/api-tab.component.ts
@@ -191,7 +191,7 @@ export class ApiTabComponent implements OnInit, OnDestroy {
   }
   private watchPageLeave() {
     const that = this;
-    window.addEventListener('beforeunload', function(e) {
+    window.addEventListener('beforeunload', function (e) {
       that.cacheData();
     });
   }

diff --git a/src/workbench/browser/src/app/pages/api/websocket/websocket.component.html b/src/workbench/browser/src/app/pages/api/websocket/websocket.component.html
@@ -4,7 +4,7 @@
       <div>
         <nz-select
           class="!w-[106px]"
-          [disabled]="isWsConnect"
+          [disabled]="['connecting', 'connected'].includes(isWsConnect)"
           [(ngModel)]="model.request.protocol"
           formControlName="protocol"
         >
@@ -18,7 +18,7 @@
             i18n-placeholder
             placeholder="Enter URL"
             formControlName="uri"
-            [disabled]="isWsConnect"
+            [disabled]="['connecting', 'connected'].includes(isWsConnect)"
             [(ngModel)]="model.request.uri"
             class="left-1"
             name="uri"
@@ -27,19 +27,27 @@
         </nz-form-control>
       </nz-form-item>
       <div class="flex px-1">
-        <button class="mx-1 w-28" *ngIf="isWsConnect === false" nz-button nzType="primary" (click)="handleConnect(null)">
+        <button
+          class="mx-1 w-28"
+          *ngIf="isWsConnect === 'disconnect'"
+          nz-button
+          nzType="primary"
+          (click)="handleConnect('connecting')"
+        >
           Connect
         </button>
-        <button class="mx-1 w-28" *ngIf="isWsConnect === null" disabled nz-button nzType="default">Connecting</button>
+        <button class="mx-1 w-28" *ngIf="isWsConnect === 'connecting'" disabled nz-button nzType="default">
+          Connecting
+        </button>
         <button
           class="mx-1 w-28"
-          *ngIf="isWsConnect === true"
+          *ngIf="isWsConnect === 'connected'"
           nz-button
           nzDanger
           nzType="default"
-          (click)="handleConnect(false)"
+          (click)="handleConnect('disconnect')"
         >
-          DisWsConnect
+          Disconnect
         </button>
       </div>
     </form>
@@ -62,12 +70,12 @@
               >Headers</span
             >
           </ng-template>
-            <eo-api-test-header
-            [disabled]="isWsConnect"
-              class="eo_theme_iblock bbd"
-              [(model)]="model.request.requestHeaders"
-              (modelChange)="emitChangeFun('requestHeaders')"
-            ></eo-api-test-header>
+          <eo-api-test-header
+            [disabled]="['connecting', 'connected'].includes(isWsConnect)"
+            class="eo_theme_iblock bbd"
+            [(model)]="model.request.requestHeaders"
+            (modelChange)="emitChangeFun('requestHeaders')"
+          ></eo-api-test-header>
         </nz-tab>
         <nz-tab [nzTitle]="queryTitleTmp" [nzForceRender]="true">
           <ng-template #queryTitleTmp>
@@ -77,7 +85,7 @@
           </ng-template>
           <eo-api-test-query
             class="eo_theme_iblock bbd"
-            [disabled]="isWsConnect"
+            [disabled]="['connecting', 'connected'].includes(isWsConnect)"
             [model]="model.request.queryParams"
             (modelChange)="emitChangeFun('queryParams')"
           ></eo-api-test-query>
@@ -103,7 +111,7 @@
                 nz-button
                 class="mx-1"
                 nzType="primary"
-                [disabled]="!isWsConnect || !model.msg"
+                [disabled]="isWsConnect !== 'connected' || !model.msg"
                 (click)="handleSendMsg()"
               >
                 Send

diff --git a/src/workbench/browser/src/app/pages/api/websocket/websocket.component.ts b/src/workbench/browser/src/app/pages/api/websocket/websocket.component.ts
@@ -37,8 +37,8 @@ export class WebsocketComponent implements OnInit, OnDestroy {
   @Input() bodyType = 'json';
   @Output() modelChange = new EventEmitter<testViewModel>();
   @Output() eoOnInit = new EventEmitter<testViewModel>();
-  isWsConnect = false;
-  isSocketConnect = false;
+  isWsConnect: 'connected' | 'connecting' | 'disconnect' = 'disconnect';
+  isSocketConnect = true;
   socket = null;
   model: testViewModel;
   WS_PROTOCOL = [
@@ -74,9 +74,14 @@ export class WebsocketComponent implements OnInit, OnDestroy {
   }
   async ngOnInit() {
     // * 通过 SocketIO 通知后端
-    this.socket = io(APP_CONFIG.SOCKETIO_URL, { transports: ['websocket'] });
+    const link = APP_CONFIG.SOCKETIO_URL;
+    // const link = 'ws://localhost:4301';
+
+    console.log('link', link);
+    this.socket = io(link, { transports: ['websocket'] });
     this.socket.on('connect_error', (error) => {
       // * conncet socketIO is failed
+      console.log('error', error);
       this.isSocketConnect = false;
     });
   }
@@ -104,7 +109,7 @@ export class WebsocketComponent implements OnInit, OnDestroy {
     }
     this.modelChange.emit(this.model);
   }
-  async handleConnect(bool = false) {
+  async handleConnect(bool = 'disconnect') {
     const isOK = this.checkForm();
     if (!isOK) {
       return;
@@ -123,7 +128,7 @@ export class WebsocketComponent implements OnInit, OnDestroy {
       ];
       return;
     }
-    if (bool === false) {
+    if (bool === 'disconnect') {
       // * save to test history
       this.model.response.responseBody.unshift({
         type: 'end',
@@ -137,11 +142,11 @@ export class WebsocketComponent implements OnInit, OnDestroy {
       }
       this.socket.emit('ws-server', { type: 'ws-disconnect', content: {} });
       this.socket.off('ws-client');
-      this.isWsConnect = false;
+      this.isWsConnect = 'disconnect';
       return;
     }
     // * connecting
-    this.isWsConnect = null;
+    this.isWsConnect = 'connecting';
     this.unListen();
     const wsUrl = this.model.request.uri;
     if (wsUrl === '') {
@@ -179,7 +184,7 @@ export class WebsocketComponent implements OnInit, OnDestroy {
       this.isSocketConnect = true;
       if (type === 'ws-connect-back') {
         if (status === 0) {
-          this.isWsConnect = true;
+          this.isWsConnect = 'connected';
           this.model.requestTabIndex = 2;
           const { reqHeader, resHeader } = content;
           this.model.response.responseBody.unshift({
@@ -202,7 +207,7 @@ export class WebsocketComponent implements OnInit, OnDestroy {
             title: 'Connected to ' + this.model.request.uri + ` is failed`,
             isExpand: false,
           });
-          this.isWsConnect = false;
+          this.isWsConnect = 'disconnect';
         }
       }
       if (type === 'ws-message-back' && status === 0) {
@@ -222,8 +227,8 @@ export class WebsocketComponent implements OnInit, OnDestroy {
     this.destroy$.next();
     this.destroy$.complete();
   }
-  checkTabCanLeave=()=>{
-    if (this.isWsConnect===false) {
+  checkTabCanLeave = () => {
+    if (this.isWsConnect === 'disconnect') {
       return true;
     }
     return new Promise((resolve) => {
@@ -237,6 +242,8 @@ export class WebsocketComponent implements OnInit, OnDestroy {
             type: 'primary',
             onClick: () => {
               modal.destroy();
+              // * disconnect ws connect
+              this.handleConnect('disconnect');
               resolve(true);
             },
           },

diff --git a/src/workbench/browser/src/environments/environment.dev.ts b/src/workbench/browser/src/environments/environment.dev.ts
@@ -3,7 +3,8 @@ export const APP_CONFIG = Object.assign(
   {
     production: false,
     environment: 'DEV',
-    SOCKETIO_URL: 'ws://106.12.149.147:4301',
+    SOCKETIO_URL: 'ws://localhost:4301',
+    // SOCKETIO_URL: 'ws://106.12.149.147:4301',
   },
   COMMON_CONFIG
 );