feat: form reset

src/workbench/browser/src/app/pages/api/api-tab.service.ts

@@ -166,7 +166,8 @@ export class ApiTabService {
       replaceTab.extends.method = model.method;
       if (currentTab.module === 'test') {
         if (currentTab.pathname === '/home/api/ws/test') {
-          replaceTab.extends.method = model.request.protocol.toUpperCase();
+          console.log('model', model);
+          replaceTab.extends.method = model.request.protocol?.toUpperCase();
         } else {
           replaceTab.extends.method = model.request.method;
         }

src/workbench/browser/src/app/pages/api/websocket/websocket.component.html

@@ -2,27 +2,53 @@
   <header class="p-[10px]">
     <form nz-form [formGroup]="validateForm" class="flex">
       <div>
-        <nz-select class="!w-[106px]" [disabled]="['connecting', 'connected'].includes(wsStatus)"
+        <nz-select
-          [(ngModel)]="model.request.protocol" formControlName="protocol">
+          class="!w-[106px]"
+          [disabled]="['connecting', 'connected'].includes(wsStatus)"
+          [(ngModel)]="model.request.protocol"
+          formControlName="protocol"
+        >
           <nz-option *ngFor="let item of WS_PROTOCOL" [nzLabel]="item.key" [nzValue]="item.value"></nz-option>
         </nz-select>
       </div>
       <nz-form-item nz-col class="flex-1">
         <nz-form-control [nzValidateStatus]="validateForm.controls.uri" i18n-nzErrorTip nzErrorTip="Please enter URL">
-          <input type="text" i18n-placeholder placeholder="Enter URL" formControlName="uri" (change)="changeUri()"
+          <input
-            [(ngModel)]="model.request.uri" class="left-1" name="uri" nz-input />
+            type="text"
+            i18n-placeholder
+            placeholder="Enter URL"
+            formControlName="uri"
+            (change)="changeUri()"
+            [(ngModel)]="model.request.uri"
+            class="left-1"
+            name="uri"
+            nz-input
+          />
         </nz-form-control>
       </nz-form-item>
       <div class="flex px-1">
-        <button class="mx-1 w-28" *ngIf="wsStatus === 'disconnect'" nz-button nzType="primary" i18n
+        <button
-          (click)="handleConnect('connecting')">
+          class="mx-1 w-28"
+          *ngIf="wsStatus === 'disconnect'"
+          nz-button
+          nzType="primary"
+          i18n
+          (click)="handleConnect('connecting')"
+        >
           Connect
         </button>
         <button i18n class="mx-1 w-28" *ngIf="wsStatus === 'connecting'" disabled nz-button nzType="default">
           Connecting
         </button>
-        <button class="mx-1 w-28" *ngIf="wsStatus === 'connected'" nz-button nzDanger i18n nzType="default"
+        <button
-          (click)="handleConnect('disconnect')">
+          class="mx-1 w-28"
+          *ngIf="wsStatus === 'connected'"
+          nz-button
+          nzDanger
+          i18n
+          nzType="default"
+          (click)="handleConnect('disconnect')"
+        >
           Disconnect
         </button>
       </div>
@@ -30,31 +56,58 @@
   </header>
   <eo-split-panel [topStyle]="{ height: '300px' }" style="height: calc(100% - 56px)">
     <div top class="h-full">
-      <nz-tabset [nzTabBarStyle]="{ 'padding-left': '10px' }" [nzAnimated]="false"
+      <nz-tabset
-        [(nzSelectedIndex)]="model.requestTabIndex" class="h-full">
+        [nzTabBarStyle]="{ 'padding-left': '10px' }"
+        [nzAnimated]="false"
+        [(nzSelectedIndex)]="model.requestTabIndex"
+        class="h-full"
+      >
         <!-- Request Headers -->
         <nz-tab [nzTitle]="headerTitleTmp" [nzForceRender]="true">
           <ng-template #headerTitleTmp>
-            <span i18n="@@RequestHeaders" nz-tooltip
+            <span
-              [nzTooltipTitle]="wsStatus !== 'disconnect' ? 'Editable only before connection' : ''">Headers</span>
+              i18n="@@RequestHeaders"
+              nz-tooltip
+              [nzTooltipTitle]="wsStatus !== 'disconnect' ? 'Editable only before connection' : ''"
+              >Headers</span
+            >
+            <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(model.request.requestHeaders)">{{
+              model.request.requestHeaders | apiParamsNum
+            }}</span>
           </ng-template>
-          <eo-api-test-header [disabled]="['connecting', 'connected'].includes(wsStatus)" class="eo_theme_iblock bbd"
+          <eo-api-test-header
-            [(model)]="model.request.requestHeaders" (modelChange)="emitChangeFun('requestHeaders')">
+            [disabled]="['connecting', 'connected'].includes(wsStatus)"
+            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>
-            <span i18n nz-tooltip
+            <span i18n nz-tooltip [nzTooltipTitle]="wsStatus !== 'disconnect' ? 'Editable only before connection' : ''"
-              [nzTooltipTitle]="wsStatus !== 'disconnect' ? 'Editable only before connection' : ''">Query Params</span>
+              >Query Params</span
+            >
+            <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(model.request.queryParams)">{{
+              model.request.queryParams | apiParamsNum
+            }}</span>
           </ng-template>
-          <eo-api-test-query class="eo_theme_iblock bbd" [disabled]="['connecting', 'connected'].includes(wsStatus)"
+          <eo-api-test-query
-            [model]="model.request.queryParams" (modelChange)="emitChangeFun('queryParams')"></eo-api-test-query>
+            class="eo_theme_iblock bbd"
+            [disabled]="['connecting', 'connected'].includes(wsStatus)"
+            [model]="model.request.queryParams"
+            (modelChange)="emitChangeFun('queryParams')"
+          ></eo-api-test-query>
         </nz-tab>
         <nz-tab [nzTitle]="messageTmp">
           <ng-template #messageTmp i18n>Message</ng-template>
           <div style="height: calc(100% - 48px)">
-            <eo-monaco-editor [(code)]="model.msg" [config]="editorConfig"
+            <eo-monaco-editor
-              [eventList]="['type', 'format', 'copy', 'search', 'replace']" (codeChange)="rawDataChange($event)">
+              [(code)]="model.msg"
+              [config]="editorConfig"
+              [eventList]="['type', 'format', 'copy', 'search', 'replace']"
+              (codeChange)="rawDataChange($event)"
+            >
             </eo-monaco-editor>
             <div class="flex justify-between p-2">
               <nz-select [(ngModel)]="editorConfig.language">
@@ -62,8 +115,14 @@
                 <nz-option nzValue="xml" nzLabel="xml"></nz-option>
                 <nz-option nzValue="json" nzLabel="json"></nz-option>
               </nz-select>
-              <button nz-button class="mx-1" nzType="primary" i18n [disabled]="wsStatus !== 'connected' || !model.msg"
+              <button
-                (click)="handleSendMsg()">
+                nz-button
+                class="mx-1"
+                nzType="primary"
+                i18n
+                [disabled]="wsStatus !== 'connected' || !model.msg"
+                (click)="handleSendMsg()"
+              >
                 Send
               </button>
             </div>
@@ -84,29 +143,37 @@
       <ul class="p-2 overflow-auto" style="height: calc(100% - 48px)">
         <li *ngFor="let item of model.response.responseBody; let index = index" class="block w-full">
           <div (click)="expandMessage(index)" class="flex flex-col w-full text-gray-500 top-line">
-            <div *ngIf="item.type === 'send'"
+            <div
-              class="inline-flex items-center px-2 py-3 truncate hover:bg-gray-100 hover:cursor-pointer">
+              *ngIf="item.type === 'send'"
+              class="inline-flex items-center px-2 py-3 truncate hover:bg-gray-100 hover:cursor-pointer"
+            >
               <span class="flex justify-center w-4 h-4 rounded shrink-0 items-cente send_icon">
                 <eo-iconpark-icon name="arrow-up" size="10"></eo-iconpark-icon>
               </span>
               <div class="px-2">{{ item.msg }}</div>
             </div>
-            <div *ngIf="item.type === 'get'"
+            <div
-              class="inline-flex items-center px-2 py-3 truncate hover:bg-gray-100 hover:cursor-pointer">
+              *ngIf="item.type === 'get'"
+              class="inline-flex items-center px-2 py-3 truncate hover:bg-gray-100 hover:cursor-pointer"
+            >
               <span class="flex justify-center w-4 h-4 rounded shrink-0 items-cente get_icon">
                 <eo-iconpark-icon name="arrow-down" size="10"></eo-iconpark-icon>
               </span>
               <div class="px-2">{{ item.msg }}</div>
             </div>
-            <div *ngIf="item.type === 'start'"
+            <div
-              class="inline-flex items-center px-2 py-3 hover:bg-gray-100 hover:cursor-pointer">
+              *ngIf="item.type === 'start'"
+              class="inline-flex items-center px-2 py-3 hover:bg-gray-100 hover:cursor-pointer"
+            >
               <span class="box-border flex justify-center w-4 h-4 rounded-full items-cente start_icon">
                 <eo-iconpark-icon name="check-small" size="10"></eo-iconpark-icon>
               </span>
               <div class="px-2">{{ item.title }}</div>
             </div>
-            <div *ngIf="item.type === 'end'"
+            <div
-              class="inline-flex items-center px-2 py-3 hover:bg-gray-100 hover:cursor-pointer">
+              *ngIf="item.type === 'end'"
+              class="inline-flex items-center px-2 py-3 hover:bg-gray-100 hover:cursor-pointer"
+            >
               <span class="box-border flex justify-center w-4 h-4 rounded-full items-cente end_icon">
                 <eo-iconpark-icon name="close-small" size="10"></eo-iconpark-icon>
               </span>
@@ -114,10 +181,17 @@
             </div>
           </div>
 
-          <eo-monaco-editor *ngIf="item.isExpand && item.type !== 'start'" [code]="item.msg" [disabled]="true" [config]="{
+          <eo-monaco-editor
+            *ngIf="item.isExpand && item.type !== 'start'"
+            [code]="item.msg"
+            [disabled]="true"
+            [config]="{
               language: 'json',
               readOnly: true
-            }" [eventList]="['type', 'format', 'copy', 'search']" (codeChange)="rawDataChange($event)">
+            }"
+            [eventList]="['type', 'format', 'copy', 'search']"
+            (codeChange)="rawDataChange($event)"
+          >
           </eo-monaco-editor>
           <ng-container *ngIf="item.isExpand && item.type === 'start'">
             <div *ngFor="let k of Object.keys(item.msg); let index = index" class="headers">

src/workbench/browser/src/app/pages/api/websocket/websocket.component.ts

@@ -12,6 +12,8 @@ import { ElectronService } from 'eo/workbench/browser/src/app/core/services';
 import { Subject, takeUntil } from 'rxjs';
 import { ModalService } from '../../../shared/services/modal.service';
 import { isEmptyObj } from 'eo/workbench/browser/src/app/utils';
+import { ApiParamsNumPipe } from '../../../shared/pipes/api-param-num.pipe';
+
 import { ApiTestHeaders, ApiTestQuery } from 'eo/workbench/browser/src/app/shared/services/api-test/api-test.model';
 interface testViewModel {
   requestTabIndex: number;
@@ -70,7 +72,7 @@ export class WebsocketComponent implements OnInit, OnDestroy {
         const historyData: unknown = await this.testService.getHistory(Number(id.replace('history_', '')));
         this.model = historyData as testViewModel;
       }
-      console.log(this.model);
+      // console.log(this.model);
     }
     this.watchBasicForm();
     this.eoOnInit.emit(this.model);
@@ -182,6 +184,10 @@ export class WebsocketComponent implements OnInit, OnDestroy {
     this.listen();
   }
 
+  bindGetApiParamNum(params) {
+    return new ApiParamsNumPipe().transform(params);
+  }
+
   handleSendMsg() {
     // * 通过 SocketIO 通知后端
     // send a message to the server
@@ -246,7 +252,7 @@ export class WebsocketComponent implements OnInit, OnDestroy {
         } else {
           this.model.response.responseBody.unshift({
             type: 'end',
-            msg: `Disconnect by ${this.getLink()}`,
+            msg: `Error by ${this.getLink()}`,
             isExpand: false,
           });
           this.wsStatus = 'disconnect';
@@ -265,6 +271,7 @@ export class WebsocketComponent implements OnInit, OnDestroy {
   }
   checkTabCanLeave = () => {
     if (this.wsStatus === 'disconnect') {
+      this.resetForm();
       return true;
     }
     return new Promise((resolve) => {
@@ -278,6 +285,7 @@ export class WebsocketComponent implements OnInit, OnDestroy {
             type: 'primary',
             onClick: () => {
               modal.destroy();
+              this.resetForm();
               // * disconnect ws connect
               this.handleConnect('disconnect');
               resolve(true);
@@ -299,10 +307,10 @@ export class WebsocketComponent implements OnInit, OnDestroy {
     const link = /^(wss:\/{2})|(ws:\/{2})\S+$/m.test(uri.trim())
       ? uri.trim()
       : protocol + '://' + uri.trim().replace('//', '');
-    console.log('link', link);
+    // console.log('link', link);
     return link;
   }
-  private resetModel() {
+  private resetModel(): testViewModel {
     return {
       requestTabIndex: 2,
       protocol: 'websocket',
@@ -320,6 +328,9 @@ export class WebsocketComponent implements OnInit, OnDestroy {
       },
     };
   }
+  resetForm() {
+    this.validateForm.reset();
+  }
   private checkForm(): boolean {
     for (const i in this.validateForm.controls) {
       if (this.validateForm.controls.hasOwnProperty(i)) {

src/workbench/node/server/socketio.js

@@ -11,6 +11,13 @@ const socket = (port = 4301) => {
     // send a message to the client
     socket.emit('ws-client', 'link success');
     let ws = null;
+
+    const unlisten = () => {
+      ws.on('close', null);
+      ws.on('upgrade', null);
+      ws.on('message', null);
+      ws = null;
+    };
     // receive a message from the client
     socket.on('ws-server', ({ type, content }) => {
       if (type === 'connect') {
@@ -39,10 +46,11 @@ const socket = (port = 4301) => {
           });
           ws.on('error', (err) => {
             socket.emit('ws-client', { type: 'ws-connect-back', status: -1, content: err });
+            unlisten();
           });
         } catch (error) {
           socket.emit('ws-client', { type: 'ws-connect-back', status: -1, content: error });
-          ws = null;
+          unlisten();
           return;
         }
 
@@ -67,10 +75,11 @@ const socket = (port = 4301) => {
 
         ws.on('close', () => {
           socket.emit('ws-client', {
-            type: 'ws-message-back',
+            type: 'ws-connect-back',
-            status: 1,
+            status: -1,
             content: 'Server disconnected',
           });
+          unlisten();
         });
       }
       if (type === 'ws-message') {