Websocket protocol

package.json

@@ -36,13 +36,14 @@
     "@bqy/node-module-alias": "^1.0.1",
     "@electron/remote": "2.0.8",
     "axios": "0.27.2",
+    "content-disposition": "^0.5.4",
+    "cors": "2.8.5",
     "crypto-js": "^4.1.1",
     "electron-log": "^4.4.8",
     "electron-store": "8.0.2",
     "electron-updater": "^5.0.5",
     "express": "4.18.1",
     "fix-path": "3.0.0",
-    "content-disposition": "^0.5.4",
     "form-data": "^4.0.0",
     "iconv-lite": "^0.6.3",
     "jquery": "^3.3.0",
@@ -51,6 +52,8 @@
     "portfinder": "1.0.28",
     "resolve": "^1.22.1",
     "rxjs": "7.5.5",
+    "socket.io": "4.5.1",
+    "ws": "8.8.1",
     "xml2js": "^0.4.23"
   },
   "devDependencies": {

src/enviroment.ts

@@ -1,5 +1,5 @@
 export const ELETRON_APP_CONFIG = {
   EXTENSION_URL: 'http://106.12.149.147',
   MOCK_URL: 'https://mockapi.eolink.com/ztBFKai20ee60c12871881565b5a6ddd718337df0e30979',
-  NODE_SERVER_PORT:4201
+  NODE_SERVER_PORT: 4201,
 };

src/platform/node/mock-server/index.ts

@@ -1,4 +1,5 @@
 import express from 'express';
+
 import type { Response } from 'express';
 import portfinder from 'portfinder';
 // import { createProxyMiddleware } from 'http-proxy-middleware';
@@ -25,6 +26,7 @@ const jsonStringify = (obj) => {
   cache = null; // Empty variables for easy recycling by garbage collection mechanisms
   return str;
 };
+
 export class MockServer {
   private app: ReturnType<typeof express>;
   private server: Server;

src/workbench/browser/angular.json

@@ -1 +1,156 @@
-{"$schema":"./node_modules/@angular/cli/lib/config/schema.json","cli":{"analytics":false,"defaultCollection":"@angular-eslint/schematics"},"version":1,"newProjectRoot":"projects","projects":{"eoapi":{"root":"","i18n":{"sourceLocale":{"code":"en","baseHref":""},"locales":{"zh":{"translation":"src/locale/messages.zh.xlf","baseHref":""}}},"sourceRoot":"src","projectType":"application","schematics":{"@schematics/angular:application":{"strict":true}},"architect":{"build":{"builder":"@angular-builders/custom-webpack:browser","options":{"localize":true,"aot":true,"outputPath":"dist","index":"src/index.html","main":"src/main.ts","tsConfig":"src/tsconfig.app.json","polyfills":"src/polyfills.ts","assets":["src/icon.ico","src/assets",{"glob":"**/*","input":"../../../node_modules/monaco-editor/min/vs","output":"/assets/vs/"}],"styles":[{"input":"src/assets/theme/classic_forest.scss","bundleName":"classic_forest","inject":false},"src/styles.scss","src/assets/theme/antd.less","src/assets/font/iconfont.css","src/ng1/index.css"],"scripts":["src/ng1/lib/angular/angular.js","src/ng1/app.module.js","src/ng1/component/select-default.js","src/ng1/component/sort-and-filter.js","src/ng1/component/auto-complete.js","src/ng1/component/list-block.js","src/ng1/directive/get-dom-length.directive.js","src/ng1/directive/drop-down-menu.directive.js","src/ng1/directive/sort.directive.js","src/ng1/directive/drop-change-space.directive.js","src/ng1/directive/inner-html.directive.js","src/ng1/directive/insert-html.directive.js","src/ng1/directive/copy-common.directive.js"],"customWebpackConfig":{"path":"./angular.webpack.js","replaceDuplicatePlugins":true},"allowedCommonJsDependencies":["brace","qs","rxjs"]},"configurations":{"dev":{"optimization":false,"outputHashing":"none","sourceMap":true,"namedChunks":false,"extractLicenses":true,"vendorChunk":false,"buildOptimizer":false,"fileReplacements":[{"replace":"src/environments/environment.ts","with":"src/environments/environment.dev.ts"}]},"web":{"optimization":false,"outputHashing":"none","sourceMap":true,"namedChunks":false,"localize":false,"extractLicenses":true,"vendorChunk":false,"buildOptimizer":false,"fileReplacements":[{"replace":"src/environments/environment.ts","with":"src/environments/environment.web.ts"}]},"webCn":{"optimization":false,"outputHashing":"none","sourceMap":true,"namedChunks":false,"localize":["zh"],"extractLicenses":true,"vendorChunk":false,"buildOptimizer":false,"fileReplacements":[{"replace":"src/environments/environment.ts","with":"src/environments/environment.web.ts"}]},"production":{"optimization":true,"outputHashing":"all","sourceMap":false,"namedChunks":false,"extractLicenses":true,"vendorChunk":false,"buildOptimizer":true,"fileReplacements":[{"replace":"src/environments/environment.ts","with":"src/environments/environment.prod.ts"}]}}},"serve":{"builder":"@angular-builders/custom-webpack:dev-server","options":{"browserTarget":"eoapi:build"},"configurations":{"dev":{"browserTarget":"eoapi:build:dev"},"web":{"browserTarget":"eoapi:build:web"},"webCn":{"browserTarget":"eoapi:build:webCn"},"production":{"browserTarget":"eoapi:build:production"}}},"extract-i18n":{"builder":"@angular-devkit/build-angular:extract-i18n","options":{"browserTarget":"eoapi:build"}},"test":{"builder":"@angular-builders/custom-webpack:karma","options":{"main":"src/test.ts","polyfills":"src/polyfills-test.ts","tsConfig":"src/tsconfig.spec.json","karmaConfig":"src/karma.conf.js","scripts":[],"styles":["src/styles.scss"],"assets":["src/assets"],"customWebpackConfig":{"path":"./angular.webpack.js","replaceDuplicatePlugins":true}}},"lint":{"builder":"@angular-eslint/builder:lint","options":{"lintFilePatterns":["src/**/*.ts","src/**/*.html"]}}}},"eoapi-e2e":{"root":"e2e","projectType":"application","architect":{"lint":{"builder":"@angular-eslint/builder:lint","options":{"lintFilePatterns":["e2e/**/*.ts"]}}}}},"defaultProject":"eoapi","schematics":{"@schematics/angular:component":{"prefix":"eo","style":"scss"},"@schematics/angular:directive":{"prefix":"eo"}}}
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": { "analytics": false, "defaultCollection": "@angular-eslint/schematics" },
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "eoapi": {
+      "root": "",
+      "i18n": {
+        "sourceLocale": { "code": "en", "baseHref": "" },
+        "locales": { "zh": { "translation": "src/locale/messages.zh.xlf", "baseHref": "" } }
+      },
+      "sourceRoot": "src",
+      "projectType": "application",
+      "schematics": { "@schematics/angular:application": { "strict": true } },
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-webpack:browser",
+          "options": {
+            "localize": true,
+            "aot": true,
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/icon.ico",
+              "src/assets",
+              { "glob": "**/*", "input": "../../../node_modules/monaco-editor/min/vs", "output": "/assets/vs/" }
+            ],
+            "styles": [
+              { "input": "src/assets/theme/classic_forest.scss", "bundleName": "classic_forest", "inject": false },
+              "src/styles.scss",
+              "src/assets/theme/antd.less",
+              "src/assets/font/iconfont.css",
+              "src/ng1/index.css"
+            ],
+            "scripts": [
+              "src/ng1/lib/angular/angular.js",
+              "src/ng1/app.module.js",
+              "src/ng1/component/select-default.js",
+              "src/ng1/component/sort-and-filter.js",
+              "src/ng1/component/auto-complete.js",
+              "src/ng1/component/list-block.js",
+              "src/ng1/directive/get-dom-length.directive.js",
+              "src/ng1/directive/drop-down-menu.directive.js",
+              "src/ng1/directive/sort.directive.js",
+              "src/ng1/directive/drop-change-space.directive.js",
+              "src/ng1/directive/inner-html.directive.js",
+              "src/ng1/directive/insert-html.directive.js",
+              "src/ng1/directive/copy-common.directive.js"
+            ],
+            "customWebpackConfig": { "path": "./angular.webpack.js", "replaceDuplicatePlugins": true },
+            "allowedCommonJsDependencies": ["brace", "qs", "rxjs"]
+          },
+          "configurations": {
+            "dev": {
+              "optimization": false,
+              "outputHashing": "none",
+              "sourceMap": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": false,
+              "fileReplacements": [
+                { "replace": "src/environments/environment.ts", "with": "src/environments/environment.dev.ts" }
+              ]
+            },
+            "web": {
+              "optimization": false,
+              "outputHashing": "none",
+              "sourceMap": true,
+              "namedChunks": false,
+              "localize": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": false,
+              "fileReplacements": [
+                { "replace": "src/environments/environment.ts", "with": "src/environments/environment.web.ts" }
+              ]
+            },
+            "webCn": {
+              "optimization": false,
+              "outputHashing": "none",
+              "sourceMap": true,
+              "namedChunks": false,
+              "localize": ["zh"],
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": false,
+              "fileReplacements": [
+                { "replace": "src/environments/environment.ts", "with": "src/environments/environment.web.ts" }
+              ]
+            },
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-builders/custom-webpack:dev-server",
+          "options": { "browserTarget": "eoapi:build" },
+          "configurations": {
+            "dev": { "browserTarget": "eoapi:build:dev" },
+            "web": { "browserTarget": "eoapi:build:web" },
+            "webCn": { "browserTarget": "eoapi:build:webCn" },
+            "production": { "browserTarget": "eoapi:build:production" }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": { "browserTarget": "eoapi:build" }
+        },
+        "test": {
+          "builder": "@angular-builders/custom-webpack:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills-test.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "scripts": [],
+            "styles": ["src/styles.scss"],
+            "assets": ["src/assets"],
+            "customWebpackConfig": { "path": "./angular.webpack.js", "replaceDuplicatePlugins": true }
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": { "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"] }
+        }
+      }
+    },
+    "eoapi-e2e": {
+      "root": "e2e",
+      "projectType": "application",
+      "architect": {
+        "lint": { "builder": "@angular-eslint/builder:lint", "options": { "lintFilePatterns": ["e2e/**/*.ts"] } }
+      }
+    }
+  },
+  "defaultProject": "eoapi",
+  "schematics": {
+    "@schematics/angular:component": { "prefix": "eo", "style": "scss" },
+    "@schematics/angular:directive": { "prefix": "eo" }
+  }
+}

src/workbench/browser/package.json

@@ -43,6 +43,7 @@
     "ngx-ace-wrapper": "12.0.0",
     "qs": "6.11.0",
     "rxjs": "7.5.5",
+    "socket.io-client": "4.5.1",
     "tslib": "^2.4.0",
     "zone.js": "~0.11.6"
   },

src/workbench/browser/src/app/pages/api/api-routing.module.ts

@@ -11,29 +11,52 @@ const routes: Routes = [
     children: [
       {
         path: '',
-        redirectTo: 'test',
-        pathMatch: 'full'
+        redirectTo: 'http',
+        pathMatch: 'full',
       },
       {
         path: 'overview',
         component: ApiOverviewComponent,
       },
       {
-        path: 'detail',
-        loadChildren: () => import('./detail/api-detail.module').then((m) => m.ApiDetailModule),
+        path: 'http',
+        children: [
+          {
+            path: '',
+            redirectTo: 'test',
+            pathMatch: 'full',
+          },
+          {
+            path: 'detail',
+            loadChildren: () => import('./http/detail/api-detail.module').then((m) => m.ApiDetailModule),
+          },
+          {
+            path: 'edit',
+            loadChildren: () => import('./http/edit/api-edit.module').then((m) => m.ApiEditModule),
+          },
+          {
+            path: 'test',
+            loadChildren: () => import('./http/test/api-test.module').then((m) => m.ApiTestModule),
+          },
+          {
+            path: 'mock',
+            loadChildren: () => import('./http/mock/api-mock.module').then((m) => m.ApiMockModule),
+          },
+        ],
       },
       {
-        path: 'edit',
-        loadChildren: () => import('./edit/api-edit.module').then((m) => m.ApiEditModule),
-      },
-      {
-        path: 'test',
-        loadChildren: () => import('./test/api-test.module').then((m) => m.ApiTestModule),
-      },
-      {
-        path: 'mock',
-        loadChildren: () => import('./mock/api-mock.module').then((m) => m.ApiMockModule),
+        path: 'ws',
+        children: [
+          {
+            path: 'test',
+            loadChildren: () => import('./websocket/websocket.module').then((m) => m.WebsocketModule),
+          },
+        ]
       },
+      // {
+      //   path: 'grpc',
+      //   loadChildren: () => import('./grpc/grpc.module').then((m) => m.GrpcModule),
+      // },
     ],
   },
 ];

src/workbench/browser/src/app/pages/api/api-shared.module.ts

@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { ApiTestHeaderComponent } from './http/test/header/api-test-header.component';
+import { ApiTestQueryComponent } from './http/test/query/api-test-query.component';
+import { ApiTestResultHeaderComponent } from './http/test/result-header/api-test-result-header.component';
+
+import { ParamsImportModule } from '../../shared/components/params-import/params-import.module';
+import { Ng1Module } from '../../ng1/ng1.module';
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzLayoutModule } from 'ng-zorro-antd/layout';
+
+import { ApiTestUtilService } from './http/test/api-test-util.service';
+import { ApiTestService } from './http/test/api-test.service';
+
+const COMPONENTS = [ApiTestHeaderComponent, ApiTestQueryComponent, ApiTestResultHeaderComponent];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    Ng1Module,
+    FormsModule,
+    ReactiveFormsModule,
+    NzFormModule,
+    NzEmptyModule,
+    NzLayoutModule,
+    ParamsImportModule,
+  ],
+  declarations: [...COMPONENTS],
+  providers: [ApiTestUtilService, ApiTestService],
+  exports: [...COMPONENTS, NzFormModule, FormsModule, ReactiveFormsModule],
+})
+export class ApiSharedModule {}