From 9b22da40d4b7dc81e05a7fe4a2f48c04c0dae0d5 Mon Sep 17 00:00:00 2001
From: Scarqin <scarqin@gmail.com>
Date: Fri, 9 Sep 2022 10:54:23 +0800
Subject: [PATCH] Websocket protocol (#132)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* update

* merge code

* feat: move many files

* feat: move detail/

* feat: move detail

* grpc stop

* feat: graph-ql

* feat: hidden grpc

* feat: base layout

* feat: editor

* feat: update ui

* feat: drag

* fix: update css

* feat: commit for now

* fix: bug

* stash

* fix: ui error

* feat: save to history

* feat: set reqHeader、query

* fix: jump error router cause error

* feat: update ui

* feat: save send data

* feat: merge sidebar websocket to http

* style: REST to API

* optimize: api test event

* fix: test in diff tab status error

* style: message & headers

* feat: disable list-block & url input

* fix:client get many time same message

* feat: ApiTabOperateService.newDefaultTab support params

* feat: ws uri

* feat: replace

* feat: render ws test history

* fix: preview -> edit

* fix: newDefaultTab params is null

* feat: add a couple { }

* feat: add Tab Text

* feat: delete useless code

* fix: menu template repeat name

* fix: style bug

* feat: add tips when connecting

* feat: ui better

* style: icon height & width

* feat: add isFixed config in tab of ws

* fix: scroll style

* feat: catch connect error

* fix: tab error

* fix: split-panel cannot auto height

* fix: css style

* feat: set env

* feat: add websocket html

* stash

* chore: SOCKETIO_URL dev config

* feat: connecting button to disabled

* fix: repeat listen message in client

* feat: save disconnect message

Co-authored-by: 夜鹰 <17kungfuboy@gmail.com>
Co-authored-by: buqiyuan <1743369777@qq.com>
---
 package.json                                  |   5 +-
 src/enviroment.ts                             |   2 +-
 .../node/grpc/index.ts}                       |   0
 src/platform/node/mock-server/index.ts        |   2 +
 src/workbench/browser/angular.json            | 157 ++++++++++-
 src/workbench/browser/package.json            |   1 +
 .../src/app/pages/api/api-routing.module.ts   |  51 +++-
 .../src/app/pages/api/api-shared.module.ts    |  35 +++
 .../src/app/pages/api/api-tab.service.ts      |  58 ++--
 .../src/app/pages/api/api.component.html      |  92 +++++--
 .../src/app/pages/api/api.component.ts        |   6 +-
 .../browser/src/app/pages/api/api.module.ts   |   9 +-
 .../app/pages/api/graph-ql/graph-ql.module.ts |  16 ++
 .../test/graph-ql-test.component.html         |   1 +
 .../test/graph-ql-test.component.scss}        |   0
 .../test/graph-ql-test.component.spec.ts      |  23 ++
 .../graph-ql/test/graph-ql-test.component.ts  |  15 ++
 .../tree/api-group-tree.component.spec.ts     |   6 +-
 .../group/tree/api-group-tree.component.ts    |   4 +-
 .../app/pages/api/grpc/grpc-routing.module.ts |  17 ++
 .../app/pages/api/grpc/grpc.component.html    |  23 ++
 .../grpc.component.scss}                      |   0
 .../src/app/pages/api/grpc/grpc.component.ts  |  25 ++
 .../src/app/pages/api/grpc/grpc.module.ts     |  13 +
 .../pages/api/history/eo-history.component.ts |   3 +-
 .../detail/api-detail-util.service.ts         |   0
 .../detail/api-detail.component.html          |   0
 .../detail/api-detail.component.scss          |   0
 .../{ => http}/detail/api-detail.component.ts |  10 +-
 .../{ => http}/detail/api-detail.module.ts    |  15 +-
 .../{ => http}/detail/api-detail.service.ts   |   0
 .../body/api-detail-body.component.html       |   0
 .../detail/body/api-detail-body.component.ts  |   2 +-
 .../header/api-detail-header.component.html   |   0
 .../header/api-detail-header.component.scss}  |   0
 .../api-detail-header.component.spec.ts       |   9 +-
 .../header/api-detail-header.component.ts     |   5 +-
 .../mock/api-detail-mock.component.html       |   0
 .../mock/api-detail-mock.component.scss}      |   0
 .../mock/api-detail-mock.component.spec.ts    |   2 +-
 .../detail/mock/api-detail-mock.component.ts  |  22 +-
 .../query/api-detail-query.component.html     |   0
 .../query/api-detail-query.component.scss}    |   0
 .../query/api-detail-query.component.spec.ts  |   9 +-
 .../query/api-detail-query.component.ts       |   2 +-
 .../rest/api-detail-rest.component.html       |   0
 .../rest/api-detail-rest.component.scss}      |   0
 .../rest/api-detail-rest.component.spec.ts    |   9 +-
 .../detail/rest/api-detail-rest.component.ts  |   2 +-
 .../{ => http}/edit/api-edit-util.service.ts  |   8 +-
 .../{ => http}/edit/api-edit.component.html   |   0
 .../{ => http}/edit/api-edit.component.scss   |   0
 .../api/{ => http}/edit/api-edit.component.ts |  18 +-
 .../api/{ => http}/edit/api-edit.module.ts    |  12 +-
 .../api/{ => http}/edit/api-edit.service.ts   |  16 +-
 .../edit/body/api-edit-body.component.html    |   0
 .../edit/body/api-edit-body.component.scss    |   0
 .../edit/body/api-edit-body.component.ts      |   4 +-
 .../api-params-extra-setting.component.html   |   0
 .../api-params-extra-setting.component.scss   |   0
 ...api-params-extra-setting.component.spec.ts |   0
 .../api-params-extra-setting.component.ts     |   6 +-
 .../header/api-edit-header.component.html     |   0
 .../header/api-edit-header.component.scss}    |   0
 .../header/api-edit-header.component.spec.ts  |   2 +-
 .../edit/header/api-edit-header.component.ts  |   2 +-
 .../edit/query/api-edit-query.component.html  |   0
 .../edit/query/api-edit-query.component.scss} |   0
 .../query/api-edit-query.component.spec.ts    |  11 +-
 .../edit/query/api-edit-query.component.ts    |  15 +-
 .../edit/rest/api-edit-rest.component.html    |   0
 .../edit/rest/api-edit-rest.component.scss}   |   0
 .../edit/rest/api-edit-rest.component.spec.ts |   2 +-
 .../edit/rest/api-edit-rest.component.ts      |  13 +-
 .../{ => http}/mock/api-mock.component.html   |   0
 .../mock/api-mock.component.scss}             |   0
 .../mock/api-mock.component.spec.ts           |   0
 .../api/{ => http}/mock/api-mock.component.ts |  15 +-
 .../api/{ => http}/mock/api-mock.module.ts    |   0
 .../{ => http}/test/api-test-util.service.ts  |   8 +-
 .../{ => http}/test/api-test.component.html   |  18 +-
 .../{ => http}/test/api-test.component.scss   |   0
 .../api/{ => http}/test/api-test.component.ts |  62 ++---
 .../api/{ => http}/test/api-test.module.ts    |  49 ++--
 .../api/{ => http}/test/api-test.service.ts   |   8 +-
 .../test/body/api-test-body.component.html    |   0
 .../test/body/api-test-body.component.scss    |   0
 .../test/body/api-test-body.component.ts      |   4 +-
 .../header/api-test-header.component.html     |   0
 .../header/api-test-header.component.scss     |   0
 .../header/api-test-header.component.spec.ts  |   0
 .../test/header/api-test-header.component.ts  |   4 +-
 .../test/query/api-test-query.component.html  |   0
 .../test/query/api-test-query.component.scss  |   0
 .../query/api-test-query.component.spec.ts    |   0
 .../test/query/api-test-query.component.ts    |   4 +-
 .../test/rest/api-test-rest.component.html    |   0
 .../test/rest/api-test-rest.component.scss    |   0
 .../test/rest/api-test-rest.component.spec.ts |   0
 .../test/rest/api-test-rest.component.ts      |   2 +-
 .../api-test-result-header.component.html     |   0
 .../api-test-result-header.component.scss     |   0
 .../api-test-result-header.component.spec.ts  |   0
 .../api-test-result-header.component.ts       |   0
 ...pi-test-result-request-body.component.html |   0
 ...pi-test-result-request-body.component.scss |   0
 ...test-result-request-body.component.spec.ts |   0
 .../api-test-result-request-body.component.ts |   0
 .../api-test-result-response.component.html   |   0
 .../api-test-result-response.component.scss   |   0
 ...api-test-result-response.component.spec.ts |   0
 .../api-test-result-response.component.ts     |   2 +-
 .../result-response/get-size.pipe.spec.ts     |   0
 .../test/result-response/get-size.pipe.ts     |   0
 .../pages/api/tab/api-tab-operate.service.ts  |  49 ++--
 .../pages/api/tab/api-tab-storage.service.ts  |   2 +-
 .../app/pages/api/tab/api-tab.component.html  |  17 +-
 .../app/pages/api/tab/api-tab.component.ts    |  12 +-
 .../api/websocket/websocket.component.html    | 186 +++++++++++++
 .../api/websocket/websocket.component.scss    |  64 +++++
 .../api/websocket/websocket.component.ts      | 253 ++++++++++++++++++
 .../pages/api/websocket/websocket.module.ts   |  35 +++
 .../api/websocket/websocket.routing.module.ts |  17 ++
 .../src/app/pages/pages.component.html        |  18 +-
 .../browser/src/app/pages/pages.module.ts     |   2 +-
 .../params-import.component.html              |  20 +-
 .../components/sidebar/sidebar.component.ts   |   4 +-
 .../split-panel/split.panel.component.scss    |   7 +-
 .../services/api-test/test-server.service.ts  |  31 +--
 .../shared/services/storage/index.model.ts    |   7 +-
 .../src/environments/environment.dev.ts       |   1 +
 .../src/environments/environment.prod.ts      |   1 +
 .../src/environments/environment.web.ts       |   1 +
 src/workbench/browser/src/index.html          |   2 +-
 src/workbench/browser/src/styles.scss         |  10 +-
 src/workbench/node/server/main.js             |  87 +++++-
 yarn.lock                                     |  57 +++-
 137 files changed, 1491 insertions(+), 328 deletions(-)
 rename src/{workbench/browser/src/app/pages/api/detail/header/api-detail-header.component.scss => platform/node/grpc/index.ts} (100%)
 create mode 100644 src/workbench/browser/src/app/pages/api/api-shared.module.ts
 create mode 100644 src/workbench/browser/src/app/pages/api/graph-ql/graph-ql.module.ts
 create mode 100644 src/workbench/browser/src/app/pages/api/graph-ql/test/graph-ql-test.component.html
 rename src/workbench/browser/src/app/pages/api/{detail/mock/api-detail-mock.component.scss => graph-ql/test/graph-ql-test.component.scss} (100%)
 create mode 100644 src/workbench/browser/src/app/pages/api/graph-ql/test/graph-ql-test.component.spec.ts
 create mode 100644 src/workbench/browser/src/app/pages/api/graph-ql/test/graph-ql-test.component.ts
 create mode 100644 src/workbench/browser/src/app/pages/api/grpc/grpc-routing.module.ts
 create mode 100644 src/workbench/browser/src/app/pages/api/grpc/grpc.component.html
 rename src/workbench/browser/src/app/pages/api/{detail/query/api-detail-query.component.scss => grpc/grpc.component.scss} (100%)
 create mode 100644 src/workbench/browser/src/app/pages/api/grpc/grpc.component.ts
 create mode 100644 src/workbench/browser/src/app/pages/api/grpc/grpc.module.ts
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/api-detail-util.service.ts (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/api-detail.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/api-detail.component.scss (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/api-detail.component.ts (85%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/api-detail.module.ts (84%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/api-detail.service.ts (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/body/api-detail-body.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/body/api-detail-body.component.ts (97%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/header/api-detail-header.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{detail/rest/api-detail-rest.component.scss => http/detail/header/api-detail-header.component.scss} (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/header/api-detail-header.component.spec.ts (74%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/header/api-detail-header.component.ts (87%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/mock/api-detail-mock.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{edit/header/api-edit-header.component.scss => http/detail/mock/api-detail-mock.component.scss} (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/mock/api-detail-mock.component.spec.ts (91%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/mock/api-detail-mock.component.ts (89%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/query/api-detail-query.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{edit/query/api-edit-query.component.scss => http/detail/query/api-detail-query.component.scss} (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/query/api-detail-query.component.spec.ts (74%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/query/api-detail-query.component.ts (88%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/rest/api-detail-rest.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{edit/rest/api-edit-rest.component.scss => http/detail/rest/api-detail-rest.component.scss} (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/rest/api-detail-rest.component.spec.ts (74%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/detail/rest/api-detail-rest.component.ts (88%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/api-edit-util.service.ts (97%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/api-edit.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/api-edit.component.scss (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/api-edit.component.ts (93%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/api-edit.module.ts (86%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/api-edit.service.ts (84%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/body/api-edit-body.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/body/api-edit-body.component.scss (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/body/api-edit-body.component.ts (98%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/extra-setting/api-params-extra-setting.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/extra-setting/api-params-extra-setting.component.scss (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/extra-setting/api-params-extra-setting.component.spec.ts (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/extra-setting/api-params-extra-setting.component.ts (95%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/header/api-edit-header.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{mock/api-mock.component.scss => http/edit/header/api-edit-header.component.scss} (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/header/api-edit-header.component.spec.ts (92%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/header/api-edit-header.component.ts (95%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/query/api-edit-query.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{test/header/api-test-header.component.scss => http/edit/query/api-edit-query.component.scss} (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/query/api-edit-query.component.spec.ts (75%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/query/api-edit-query.component.ts (86%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/rest/api-edit-rest.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{test/query/api-test-query.component.scss => http/edit/rest/api-edit-rest.component.scss} (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/rest/api-edit-rest.component.spec.ts (91%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/edit/rest/api-edit-rest.component.ts (86%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/mock/api-mock.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{test/rest/api-test-rest.component.scss => http/mock/api-mock.component.scss} (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/mock/api-mock.component.spec.ts (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/mock/api-mock.component.ts (96%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/mock/api-mock.module.ts (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/api-test-util.service.ts (97%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/api-test.component.html (93%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/api-test.component.scss (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/api-test.component.ts (88%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/api-test.module.ts (62%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/api-test.service.ts (93%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/body/api-test-body.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/body/api-test-body.component.scss (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/body/api-test-body.component.ts (98%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/header/api-test-header.component.html (100%)
 create mode 100644 src/workbench/browser/src/app/pages/api/http/test/header/api-test-header.component.scss
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/header/api-test-header.component.spec.ts (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/header/api-test-header.component.ts (93%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/query/api-test-query.component.html (100%)
 create mode 100644 src/workbench/browser/src/app/pages/api/http/test/query/api-test-query.component.scss
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/query/api-test-query.component.spec.ts (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/query/api-test-query.component.ts (93%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/rest/api-test-rest.component.html (100%)
 create mode 100644 src/workbench/browser/src/app/pages/api/http/test/rest/api-test-rest.component.scss
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/rest/api-test-rest.component.spec.ts (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/rest/api-test-rest.component.ts (95%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/result-header/api-test-result-header.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/result-header/api-test-result-header.component.scss (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/result-header/api-test-result-header.component.spec.ts (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/result-header/api-test-result-header.component.ts (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/result-request-body/api-test-result-request-body.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/result-request-body/api-test-result-request-body.component.scss (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/result-request-body/api-test-result-request-body.component.spec.ts (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/result-request-body/api-test-result-request-body.component.ts (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/result-response/api-test-result-response.component.html (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/result-response/api-test-result-response.component.scss (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/result-response/api-test-result-response.component.spec.ts (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/result-response/api-test-result-response.component.ts (96%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/result-response/get-size.pipe.spec.ts (100%)
 rename src/workbench/browser/src/app/pages/api/{ => http}/test/result-response/get-size.pipe.ts (100%)
 create mode 100644 src/workbench/browser/src/app/pages/api/websocket/websocket.component.html
 create mode 100644 src/workbench/browser/src/app/pages/api/websocket/websocket.component.scss
 create mode 100644 src/workbench/browser/src/app/pages/api/websocket/websocket.component.ts
 create mode 100644 src/workbench/browser/src/app/pages/api/websocket/websocket.module.ts
 create mode 100644 src/workbench/browser/src/app/pages/api/websocket/websocket.routing.module.ts

diff --git a/package.json b/package.json
index 004e6d185..0e866656f 100644
--- a/package.json
+++ b/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": {
diff --git a/src/enviroment.ts b/src/enviroment.ts
index 5e560b97e..a322c3e35 100644
--- a/src/enviroment.ts
+++ b/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,
 };
diff --git a/src/workbench/browser/src/app/pages/api/detail/header/api-detail-header.component.scss b/src/platform/node/grpc/index.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/detail/header/api-detail-header.component.scss
rename to src/platform/node/grpc/index.ts
diff --git a/src/platform/node/mock-server/index.ts b/src/platform/node/mock-server/index.ts
index 21c3235a1..f1f454177 100644
--- a/src/platform/node/mock-server/index.ts
+++ b/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;
diff --git a/src/workbench/browser/angular.json b/src/workbench/browser/angular.json
index e62f60c01..2e37536ba 100644
--- a/src/workbench/browser/angular.json
+++ b/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"}}}
\ No newline at end of file
+{
+  "$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" }
+  }
+}
diff --git a/src/workbench/browser/package.json b/src/workbench/browser/package.json
index 8eafb7b16..b5cfc1d62 100644
--- a/src/workbench/browser/package.json
+++ b/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"
   },
diff --git a/src/workbench/browser/src/app/pages/api/api-routing.module.ts b/src/workbench/browser/src/app/pages/api/api-routing.module.ts
index 1dd16dbb5..ba0b0302d 100644
--- a/src/workbench/browser/src/app/pages/api/api-routing.module.ts
+++ b/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),
+      // },
     ],
   },
 ];
diff --git a/src/workbench/browser/src/app/pages/api/api-shared.module.ts b/src/workbench/browser/src/app/pages/api/api-shared.module.ts
new file mode 100644
index 000000000..fe2f53a1c
--- /dev/null
+++ b/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 {}
diff --git a/src/workbench/browser/src/app/pages/api/api-tab.service.ts b/src/workbench/browser/src/app/pages/api/api-tab.service.ts
index 9b8203c0b..3000dd489 100644
--- a/src/workbench/browser/src/app/pages/api/api-tab.service.ts
+++ b/src/workbench/browser/src/app/pages/api/api-tab.service.ts
@@ -11,20 +11,20 @@ export class ApiTabService {
   componentRef;
   apiTabComponent: ApiTabComponent;
   // Set current tab type:'preview'|'edit' for  later judgment
-  get currentTabType(): string {
-    return this.BASIC_TABS.find((val) => this.router.url.includes(val.pathname))?.type || 'preview';
+  get currentComponentTab(): Partial<TabItem> {
+    return this.BASIC_TABS.find((val) => this.router.url.includes(val.pathname));
   }
   private changeContent$: Subject<any> = new Subject();
   BASIC_TABS: Partial<TabItem>[] = [
     {
-      pathname: '/home/api/test',
+      pathname: '/home/api/http/test',
       module: 'test',
       type: 'edit',
       title: $localize`New Request`,
       extends: { method: 'POST' },
     },
-    { pathname: '/home/api/edit', module: 'edit', isFixed: true, type: 'edit', title: $localize`New API` },
-    { pathname: '/home/api/detail', module: 'detail', type: 'preview', title: $localize`Preview` },
+    { pathname: '/home/api/http/edit', module: 'edit', isFixed: true, type: 'edit', title: $localize`New API` },
+    { pathname: '/home/api/http/detail', module: 'detail', type: 'preview', title: $localize`Preview` },
     {
       pathname: '/home/api/overview',
       type: 'preview',
@@ -32,7 +32,15 @@ export class ApiTabService {
       title: $localize`:@@API Index:Index`,
       icon: 'home',
     },
-    { pathname: '/home/api/mock', module: 'mock', type: 'preview', title: 'Mock' },
+    {
+      pathname: '/home/api/ws/test',
+      module: 'test',
+      isFixed: true,
+      type: 'edit',
+      extends: { method: 'WS' },
+      title: $localize`New Websocket`,
+    },
+    { pathname: '/home/api/http/mock', module: 'mock', type: 'preview', title: 'Mock' },
   ];
   constructor(private messageService: MessageService, private router: Router) {
     this.changeContent$.pipe(debounceTime(150)).subscribe((inData) => {
@@ -79,7 +87,7 @@ export class ApiTabService {
         this.afterContentChanged({ when: 'init', url, model });
       },
     };
-    if (this.currentTabType === 'edit') {
+    if (this.currentComponentTab.type === 'edit') {
       this.componentRef.afterSaved = {
         emit: (model) => {
           this.afterContentChanged({ when: 'saved', url, model });
@@ -91,6 +99,13 @@ export class ApiTabService {
         },
       };
     }
+    if (this.currentComponentTab.module === 'test') {
+      this.componentRef.afterTested = {
+        emit: (model) => {
+          this.afterContentChanged({ when: 'afterTested', url, model });
+        },
+      };
+    }
   }
   /**
    * Before close tab,handle page content
@@ -149,13 +164,18 @@ export class ApiTabService {
       //Set title/method
       replaceTab.title = model.name;
       replaceTab.extends.method = model.method;
-      if (currentTab.pathname === '/home/api/test') {
-        replaceTab.extends.method = model.request.method;
+      if (currentTab.module === 'test') {
+        if (currentTab.pathname === '/home/api/ws/test') {
+          replaceTab.extends.method = model.request.protocol.toUpperCase();
+        } else {
+          replaceTab.extends.method = model.request.method;
+        }
         //Only Untitle request need set url to tab title
+        const originTitle = this.BASIC_TABS.find((val) => val.pathname === currentTab.pathname)?.title;
         if (!model.request.uuid || (currentTab.params.uuid && currentTab.params.uuid.includes('history_'))) {
-          replaceTab.title = model.request.uri || this.BASIC_TABS[0].title;
+          replaceTab.title = model.request.uri || originTitle;
         } else {
-          replaceTab.title = model.request.name || this.BASIC_TABS[0].title;
+          replaceTab.title = model.request.name || originTitle;
         }
       } else if (!model.uuid) {
         replaceTab.title =
@@ -173,11 +193,7 @@ export class ApiTabService {
         switch (inData.when) {
           case 'editing': {
             // Saved APIs do not need to verify changes
-            if (
-              currentTab.pathname !== '/home/api/test' ||
-              !currentTab.params.uuid ||
-              currentTab.params.uuid.includes('history')
-            ) {
+            if (currentTab.module !== 'test' || !currentTab.params.uuid || currentTab.params.uuid.includes('history')) {
               currentHasChanged = this.componentRef.isFormChange();
             } else {
               currentHasChanged = false;
@@ -214,7 +230,7 @@ export class ApiTabService {
         replaceTab.isFixed = true;
       }
       //Has tested/exsix api set fixed
-      if (currentTab.pathname === '/home/api/test' && (model.testStartTime !== undefined || currentTab.params.uuid)) {
+      if (currentTab.module === 'test' && (model.testStartTime !== undefined || currentTab.params.uuid)) {
         replaceTab.isFixed = true;
       }
     }
@@ -226,7 +242,7 @@ export class ApiTabService {
    *
    * @param inData.url get component fit tab data
    */
-  afterContentChanged(inData: { when: 'init' | 'editing' | 'saved'; url: string; model: any }) {
+  afterContentChanged(inData: { when: 'init' | 'editing' | 'saved' | 'afterTested'; url: string; model: any }) {
     if (!this.apiTabComponent) {
       console.warn(`EO_WARNING:apiTabComponent hasn't init yet!`);
       return;
@@ -236,9 +252,9 @@ export class ApiTabService {
       console.warn(`has't find the tab fit child component ,url:${inData.url}`);
       return;
     }
-    if (inData.model?.when === 'otherTabTested') {
+    if (inData?.when === 'afterTested') {
       //Update other tab test result
-      inData.url = `/home/api/test?pageID=${inData.model.id}`;
+      inData.url = `${inData.model.url}?pageID=${inData.model.id}`;
       currentTab = this.apiTabComponent.getExistTabByUrl(inData.url);
       inData.model = Object.assign({}, currentTab.content.test, inData.model.model);
     }
@@ -246,7 +262,7 @@ export class ApiTabService {
   }
   handleDataBeforeCache(tabsByID) {
     Object.values(tabsByID).forEach((val: TabItem) => {
-      if (val.pathname === '/home/api/test' && val.content?.test?.testResult) {
+      if (val.module === 'test' && val.content?.test?.testResult) {
         val.content.test.testResult = {
           request: {},
           response: {},
diff --git a/src/workbench/browser/src/app/pages/api/api.component.html b/src/workbench/browser/src/app/pages/api/api.component.html
index e546a3213..0e993bd87 100644
--- a/src/workbench/browser/src/app/pages/api/api.component.html
+++ b/src/workbench/browser/src/app/pages/api/api.component.html
@@ -1,12 +1,25 @@
 <nz-layout class="layout">
-  <nz-sider nzTheme="light" [nzWidth]="siderWidth" nz-resizable [nzMinWidth]="120" [nzMaxWidth]="400"
-    (nzResize)="onSideResize($event)" (nzResizeEnd)="onResizeEnd()">
+  <nz-sider
+    nzTheme="light"
+    [nzWidth]="siderWidth"
+    nz-resizable
+    [nzMinWidth]="120"
+    [nzMaxWidth]="400"
+    (nzResize)="onSideResize($event)"
+    (nzResizeEnd)="onResizeEnd()"
+  >
     <!-- <div class="side-container"> -->
     <nz-content class="api-container-tabs">
       <nz-tabset nzCentered [nzAnimated]="false" [(nzSelectedIndex)]="tabsIndex">
         <nz-tab [nzTitle]="apiTitle">
           <ng-template #apiTitle>
-            <span i18n-nzTooltipTitle nzTooltipTitle="Collections" nz-tooltip [nzTooltipMouseEnterDelay]="0.7" class="text-lg tab-content">
+            <span
+              i18n-nzTooltipTitle
+              nzTooltipTitle="Collections"
+              nz-tooltip
+              [nzTooltipMouseEnterDelay]="0.7"
+              class="text-lg tab-content"
+            >
               <eo-iconpark-icon name="folder-open"></eo-iconpark-icon>
             </span>
           </ng-template>
@@ -16,7 +29,13 @@
         </nz-tab>
         <nz-tab [nzTitle]="historyTitle">
           <ng-template #historyTitle>
-            <span i18n-nzTooltipTitle nzTooltipTitle="History" nz-tooltip  [nzTooltipMouseEnterDelay]="0.7" class="text-lg tab-content">
+            <span
+              i18n-nzTooltipTitle
+              nzTooltipTitle="History"
+              nz-tooltip
+              [nzTooltipMouseEnterDelay]="0.7"
+              class="text-lg tab-content"
+            >
               <eo-iconpark-icon name="history"></eo-iconpark-icon>
             </span>
           </ng-template>
@@ -25,7 +44,7 @@
       </nz-tabset>
     </nz-content>
     <nz-resize-handle nzDirection="right">
-      <div class="sider-resize-line" [ngClass]="{'is-drag': isDragging}"> <i></i><i></i><i></i><i></i></div>
+      <div class="sider-resize-line" [ngClass]="{ 'is-drag': isDragging }"><i></i><i></i><i></i><i></i></div>
     </nz-resize-handle>
     <!-- </div> -->
   </nz-sider>
@@ -33,22 +52,45 @@
     <nz-content>
       <div class="inner-content">
         <div class="flex items-center tabs-bar">
-          <eo-api-tab class="fg1" [list]="apiTab.BASIC_TABS" [handleDataBeforeCache]="apiTab.handleDataBeforeCache"
-            (beforeClose)="apiTab.beforeTabClose($event)" #apiTabComponent></eo-api-tab>
+          <eo-api-tab
+            class="fg1"
+            [list]="apiTab.BASIC_TABS"
+            [handleDataBeforeCache]="apiTab.handleDataBeforeCache"
+            (beforeClose)="apiTab.beforeTabClose($event)"
+            #apiTabComponent
+          ></eo-api-tab>
           <div class="flex items-center fix-mt">
-            <nz-select [(ngModel)]="envUuid" [(nzOpen)]="isOpen" (nzOpenChange)="handleEnvSelectStatus($event)"
-              [nzDropdownRender]="renderTemplate" nzAllowClear i18n-nzPlaceHolder="Environment Dropdown placeholder"
-              nzPlaceHolder="Environment" #envSelect>
+            <nz-select
+              [(ngModel)]="envUuid"
+              [(nzOpen)]="isOpen"
+              (nzOpenChange)="handleEnvSelectStatus($event)"
+              [nzDropdownRender]="renderTemplate"
+              nzAllowClear
+              i18n-nzPlaceHolder="Environment Dropdown placeholder"
+              nzPlaceHolder="Environment"
+              #envSelect
+            >
               <nz-option *ngFor="let item of envList" [nzValue]="item.uuid" [nzLabel]="item.name"></nz-option>
             </nz-select>
             <ng-template #renderTemplate>
               <nz-divider></nz-divider>
-              <a class="text-sx manager-env" nz-button nzType="link" (click)="gotoEnvManager()" i18n>Manage
-                Environment</a>
+              <a class="text-sx manager-env" nz-button nzType="link" (click)="gotoEnvManager()" i18n
+                >Manage Environment</a
+              >
             </ng-template>
-            <span class="flex items-center justify-center mx-1 icon" i18n-nzTooltipTitle nz-tooltip [nzTooltipMouseEnterDelay]="0.8" [nzTooltipMouseLeaveDelay]="0"
-              nzTooltipTitle="Enviroment Quick Look" nz-popover [nzPopoverContent]="envParams"  nzTooltipPlacement="bottomRight"
-              nzPopoverPlacement="bottomRight" nzPopoverTrigger="click">
+            <span
+              class="flex items-center justify-center mx-1 icon"
+              i18n-nzTooltipTitle
+              nz-tooltip
+              [nzTooltipMouseEnterDelay]="0.8"
+              [nzTooltipMouseLeaveDelay]="0"
+              nzTooltipTitle="Enviroment Quick Look"
+              nz-popover
+              [nzPopoverContent]="envParams"
+              nzTooltipPlacement="bottomRight"
+              nzPopoverPlacement="bottomRight"
+              nzPopoverTrigger="click"
+            >
               <eo-iconpark-icon name="eyes"></eo-iconpark-icon>
             </span>
             <ng-template #envParams>
@@ -69,11 +111,21 @@
           <!-- Get router child component by activate -->
           <router-outlet (activate)="onActivate($event)"></router-outlet>
           <eo-split-x *ngIf="activeBar" (x)="handleDrag($event)" [init]="[200, dyWidth, 400]"></eo-split-x>
-          <div class="absolute top-0 bottom-0 right-0 flex right-bar" [ngClass]="{ 'left-line': !activeBar }"
-            [ngStyle]="{ width: activeBar ? dyWidth + 'px' : '40px' }">
-            <div class="flex items-center justify-center w-[40px] p-2 h-10 env-icon"
-              [ngClass]="activeBar ? 'active' : ''" (click)="toggleRightBar()" nz-tooltip [nzTooltipMouseEnterDelay]="0.7" [nzTooltipMouseLeaveDelay]="0"
-              i18n-nzTooltipTitle="@@Environment Setting" nzTooltipTitle="Environment Setting">
+          <div
+            class="absolute top-0 bottom-0 right-0 flex right-bar"
+            [ngClass]="{ 'left-line': !activeBar }"
+            [ngStyle]="{ width: activeBar ? dyWidth + 'px' : '40px' }"
+          >
+            <div
+              class="flex items-center justify-center w-[40px] p-2 h-10 env-icon"
+              [ngClass]="activeBar ? 'active' : ''"
+              (click)="toggleRightBar()"
+              nz-tooltip
+              [nzTooltipMouseEnterDelay]="0.7"
+              [nzTooltipMouseLeaveDelay]="0"
+              i18n-nzTooltipTitle="@@Environment Setting"
+              nzTooltipTitle="Environment Setting"
+            >
               <eo-iconpark-icon name="instruction"></eo-iconpark-icon>
             </div>
             <eo-env *ngIf="activeBar" class="flex-auto" (statusChange)="toggleRightBar(false)"></eo-env>
diff --git a/src/workbench/browser/src/app/pages/api/api.component.ts b/src/workbench/browser/src/app/pages/api/api.component.ts
index ea1d087f6..3dc707721 100644
--- a/src/workbench/browser/src/app/pages/api/api.component.ts
+++ b/src/workbench/browser/src/app/pages/api/api.component.ts
@@ -44,15 +44,15 @@ export class ApiComponent implements OnInit, OnDestroy {
   pageID: number;
   TABS = [
     {
-      routerLink: 'detail',
+      routerLink: 'http/detail',
       title: $localize`:@@API Detail:Preview`,
     },
     {
-      routerLink: 'edit',
+      routerLink: 'http/edit',
       title: $localize`Edit`,
     },
     {
-      routerLink: 'test',
+      routerLink: 'http/test',
       title: $localize`Test`,
     },
   ];
diff --git a/src/workbench/browser/src/app/pages/api/api.module.ts b/src/workbench/browser/src/app/pages/api/api.module.ts
index eba2446cf..ee7baf548 100644
--- a/src/workbench/browser/src/app/pages/api/api.module.ts
+++ b/src/workbench/browser/src/app/pages/api/api.module.ts
@@ -84,6 +84,13 @@ const COMPONENTS = [
   ],
   declarations: [...COMPONENTS],
   exports: [],
-  providers: [ElectronService, ApiService, ApiTabService, ApiTabOperateService, ApiTabStorageService, IndexedDBStorage],
+  providers: [
+    ElectronService,
+    ApiService,
+    ApiTabService,
+    ApiTabOperateService,
+    ApiTabStorageService,
+    IndexedDBStorage,
+  ],
 })
 export class ApiModule {}
diff --git a/src/workbench/browser/src/app/pages/api/graph-ql/graph-ql.module.ts b/src/workbench/browser/src/app/pages/api/graph-ql/graph-ql.module.ts
new file mode 100644
index 000000000..d6ed0539c
--- /dev/null
+++ b/src/workbench/browser/src/app/pages/api/graph-ql/graph-ql.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GraphQlTestComponent } from './test/graph-ql-test.component';
+
+
+
+@NgModule({
+  declarations: [
+
+    GraphQlTestComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class GraphQlModule { }
diff --git a/src/workbench/browser/src/app/pages/api/graph-ql/test/graph-ql-test.component.html b/src/workbench/browser/src/app/pages/api/graph-ql/test/graph-ql-test.component.html
new file mode 100644
index 000000000..6b3bdd6c3
--- /dev/null
+++ b/src/workbench/browser/src/app/pages/api/graph-ql/test/graph-ql-test.component.html
@@ -0,0 +1 @@
+<p>graph-ql-test works!</p>
diff --git a/src/workbench/browser/src/app/pages/api/detail/mock/api-detail-mock.component.scss b/src/workbench/browser/src/app/pages/api/graph-ql/test/graph-ql-test.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/detail/mock/api-detail-mock.component.scss
rename to src/workbench/browser/src/app/pages/api/graph-ql/test/graph-ql-test.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/graph-ql/test/graph-ql-test.component.spec.ts b/src/workbench/browser/src/app/pages/api/graph-ql/test/graph-ql-test.component.spec.ts
new file mode 100644
index 000000000..d1bead7f1
--- /dev/null
+++ b/src/workbench/browser/src/app/pages/api/graph-ql/test/graph-ql-test.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GraphQlTestComponent } from './graph-ql-test.component';
+
+describe('GraphQlTestComponent', () => {
+  let component: GraphQlTestComponent;
+  let fixture: ComponentFixture<GraphQlTestComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GraphQlTestComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GraphQlTestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/workbench/browser/src/app/pages/api/graph-ql/test/graph-ql-test.component.ts b/src/workbench/browser/src/app/pages/api/graph-ql/test/graph-ql-test.component.ts
new file mode 100644
index 000000000..9f97c6ad1
--- /dev/null
+++ b/src/workbench/browser/src/app/pages/api/graph-ql/test/graph-ql-test.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'eo-graph-ql-test',
+  templateUrl: './graph-ql-test.component.html',
+  styleUrls: ['./graph-ql-test.component.scss']
+})
+export class GraphQlTestComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.spec.ts b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.spec.ts
index 3f2633863..35357fc49 100644
--- a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.spec.ts
+++ b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.spec.ts
@@ -36,12 +36,12 @@ describe('ApiGroupTreeComponent', () => {
         {
           provide: Router,
           useValue: {
-            url: '/home/api/test?uuid=1',
+            url: '/home/api/http/test?uuid=1',
             events: of(
               new NavigationEnd(
                 0,
-                'http://localhost:4200/home/api/test',
-                'http://localhost:4200/home/api/test?uuid=1',
+                'http://localhost:4200/home/api/http/test',
+                'http://localhost:4200/home/api/http/test?uuid=1',
               )
             ),
             navigate: jasmine.createSpy('navigate'),
diff --git a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.ts b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.ts
index bed30d873..51ed4a790 100644
--- a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.ts
+++ b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.ts
@@ -194,7 +194,7 @@ export class ApiGroupTreeComponent implements OnInit, OnDestroy {
       case 'testApi':
       case 'editApi':
       case 'detailApi': {
-        this.router.navigate([`/home/api/${inArg.eventName.replace('Api', '')}`], {
+        this.router.navigate([`/home/api/http/${inArg.eventName.replace('Api', '')}`], {
           queryParams: { uuid: inArg.node.key },
         });
         break;
@@ -206,7 +206,7 @@ export class ApiGroupTreeComponent implements OnInit, OnDestroy {
         break;
       }
       case 'addAPI': {
-        this.router.navigate(['/home/api/edit'], {
+        this.router.navigate(['/home/api/http/edit'], {
           queryParams: { groupID: inArg.node?.origin.key.replace('group-', '') },
         });
         break;
diff --git a/src/workbench/browser/src/app/pages/api/grpc/grpc-routing.module.ts b/src/workbench/browser/src/app/pages/api/grpc/grpc-routing.module.ts
new file mode 100644
index 000000000..469fec033
--- /dev/null
+++ b/src/workbench/browser/src/app/pages/api/grpc/grpc-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GrpcComponent } from './grpc.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GrpcComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GrpcRoutingModule {}
diff --git a/src/workbench/browser/src/app/pages/api/grpc/grpc.component.html b/src/workbench/browser/src/app/pages/api/grpc/grpc.component.html
new file mode 100644
index 000000000..718def970
--- /dev/null
+++ b/src/workbench/browser/src/app/pages/api/grpc/grpc.component.html
@@ -0,0 +1,23 @@
+<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
+  <nz-form-item>
+    <nz-form-control nzErrorTip="Please input your username!">
+      <input formControlName="url" nz-input placeholder="目标地址" />
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-control nzErrorTip="Please input your Password!">
+      <input formControlName="serviceName" nz-input placeholder="API调用名称" />
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-control nzErrorTip="Please input your Password!">
+      <input formControlName="methodName" nz-input placeholder="方法名" />
+    </nz-form-control>
+  </nz-form-item>
+
+  <nz-form-item>
+    <nz-form-control>
+      <button nz-button nzType="primary" [disabled]="!validateForm.valid">Log in</button>
+    </nz-form-control>
+  </nz-form-item>
+</form>
diff --git a/src/workbench/browser/src/app/pages/api/detail/query/api-detail-query.component.scss b/src/workbench/browser/src/app/pages/api/grpc/grpc.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/detail/query/api-detail-query.component.scss
rename to src/workbench/browser/src/app/pages/api/grpc/grpc.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/grpc/grpc.component.ts b/src/workbench/browser/src/app/pages/api/grpc/grpc.component.ts
new file mode 100644
index 000000000..367ec1b8e
--- /dev/null
+++ b/src/workbench/browser/src/app/pages/api/grpc/grpc.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'eo-grpc',
+  templateUrl: './grpc.component.html',
+  styleUrls: ['./grpc.component.scss'],
+})
+export class GrpcComponent implements OnInit {
+  validateForm!: UntypedFormGroup;
+
+  submitForm(): void {
+    console.log('submit', this.validateForm.value);
+  }
+
+  constructor(private fb: UntypedFormBuilder) {}
+
+  ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      url: [null, [Validators.required]],
+      serviceName: [null, [Validators.required]],
+      methodName: [null, [Validators.required]],
+    });
+  }
+}
diff --git a/src/workbench/browser/src/app/pages/api/grpc/grpc.module.ts b/src/workbench/browser/src/app/pages/api/grpc/grpc.module.ts
new file mode 100644
index 000000000..6818b95f5
--- /dev/null
+++ b/src/workbench/browser/src/app/pages/api/grpc/grpc.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { GrpcComponent } from './grpc.component';
+import { GrpcRoutingModule } from './grpc-routing.module';
+import { SharedModule } from 'eo/workbench/browser/src/app/shared/shared.module';
+
+@NgModule({
+  imports: [SharedModule, FormsModule, CommonModule, GrpcRoutingModule],
+  declarations: [GrpcComponent],
+})
+export class GrpcModule {}
diff --git a/src/workbench/browser/src/app/pages/api/history/eo-history.component.ts b/src/workbench/browser/src/app/pages/api/history/eo-history.component.ts
index dc662701f..81625d1ea 100644
--- a/src/workbench/browser/src/app/pages/api/history/eo-history.component.ts
+++ b/src/workbench/browser/src/app/pages/api/history/eo-history.component.ts
@@ -44,7 +44,8 @@ export class HistoryComponent implements OnInit {
   }
 
   gotoTestHistory(data) {
-    this.router.navigate(['home/api/test'], {
+    const protocol=data.protocol==='websocket'?'ws':'http';
+    this.router.navigate([`home/api/${protocol}/test`], {
       queryParams: {
         uuid: `history_${data.uuid}`,
       },
diff --git a/src/workbench/browser/src/app/pages/api/detail/api-detail-util.service.ts b/src/workbench/browser/src/app/pages/api/http/detail/api-detail-util.service.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/detail/api-detail-util.service.ts
rename to src/workbench/browser/src/app/pages/api/http/detail/api-detail-util.service.ts
diff --git a/src/workbench/browser/src/app/pages/api/detail/api-detail.component.html b/src/workbench/browser/src/app/pages/api/http/detail/api-detail.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/detail/api-detail.component.html
rename to src/workbench/browser/src/app/pages/api/http/detail/api-detail.component.html
diff --git a/src/workbench/browser/src/app/pages/api/detail/api-detail.component.scss b/src/workbench/browser/src/app/pages/api/http/detail/api-detail.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/detail/api-detail.component.scss
rename to src/workbench/browser/src/app/pages/api/http/detail/api-detail.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/detail/api-detail.component.ts b/src/workbench/browser/src/app/pages/api/http/detail/api-detail.component.ts
similarity index 85%
rename from src/workbench/browser/src/app/pages/api/detail/api-detail.component.ts
rename to src/workbench/browser/src/app/pages/api/http/detail/api-detail.component.ts
index 693593dcb..303d79db0 100644
--- a/src/workbench/browser/src/app/pages/api/detail/api-detail.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/detail/api-detail.component.ts
@@ -6,10 +6,10 @@ import {
   JsonRootType,
   StorageRes,
   StorageResStatus,
-} from '../../../shared/services/storage/index.model';
-import { treeToListHasLevel } from '../../../utils/tree/tree.utils';
-import { reverseObj } from '../../../utils';
-import { StorageService } from '../../../shared/services/storage';
+} from '../../../../shared/services/storage/index.model';
+import { treeToListHasLevel } from '../../../../utils/tree/tree.utils';
+import { reverseObj } from '../../../../utils';
+import { StorageService } from '../../../../shared/services/storage';
 import { RemoteService } from 'eo/workbench/browser/src/app/shared/services/remote/remote.service';
 @Component({
   selector: 'api-detail',
@@ -34,7 +34,7 @@ export class ApiDetailComponent implements OnInit {
       if (id) {
         this.model = (await this.getApiByUuid(Number(id))) as ApiData;
       } else {
-        console.error('Can\'t no find api');
+        console.error("Can't no find api");
       }
     }
     this.eoOnInit.emit(this.model);
diff --git a/src/workbench/browser/src/app/pages/api/detail/api-detail.module.ts b/src/workbench/browser/src/app/pages/api/http/detail/api-detail.module.ts
similarity index 84%
rename from src/workbench/browser/src/app/pages/api/detail/api-detail.module.ts
rename to src/workbench/browser/src/app/pages/api/http/detail/api-detail.module.ts
index 4cc44d09f..7aba1fb10 100644
--- a/src/workbench/browser/src/app/pages/api/detail/api-detail.module.ts
+++ b/src/workbench/browser/src/app/pages/api/http/detail/api-detail.module.ts
@@ -2,9 +2,9 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import { Ng1Module } from '../../../ng1/ng1.module';
-import { EouiModule } from '../../../eoui/eoui.module';
-import { SharedModule } from '../../../shared/shared.module';
+import { Ng1Module } from '../../../../ng1/ng1.module';
+import { EouiModule } from '../../../../eoui/eoui.module';
+import { SharedModule } from '../../../../shared/shared.module';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzTagModule } from 'ng-zorro-antd/tag';
@@ -23,14 +23,7 @@ import { ApiDetailUtilService } from './api-detail-util.service';
 import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 import { RouterModule } from '@angular/router';
 
-const NZ_COMPONETS = [
-  NzButtonModule,
-  NzCollapseModule,
-  NzTagModule,
-  NzModalModule,
-  NzFormModule,
-  NzToolTipModule,
-];
+const NZ_COMPONETS = [NzButtonModule, NzCollapseModule, NzTagModule, NzModalModule, NzFormModule, NzToolTipModule];
 const COMPONENTS = [
   ApiDetailComponent,
   ApiDetailHeaderComponent,
diff --git a/src/workbench/browser/src/app/pages/api/detail/api-detail.service.ts b/src/workbench/browser/src/app/pages/api/http/detail/api-detail.service.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/detail/api-detail.service.ts
rename to src/workbench/browser/src/app/pages/api/http/detail/api-detail.service.ts
diff --git a/src/workbench/browser/src/app/pages/api/detail/body/api-detail-body.component.html b/src/workbench/browser/src/app/pages/api/http/detail/body/api-detail-body.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/detail/body/api-detail-body.component.html
rename to src/workbench/browser/src/app/pages/api/http/detail/body/api-detail-body.component.html
diff --git a/src/workbench/browser/src/app/pages/api/detail/body/api-detail-body.component.ts b/src/workbench/browser/src/app/pages/api/http/detail/body/api-detail-body.component.ts
similarity index 97%
rename from src/workbench/browser/src/app/pages/api/detail/body/api-detail-body.component.ts
rename to src/workbench/browser/src/app/pages/api/http/detail/body/api-detail-body.component.ts
index 0dac64d7d..e138ed7ba 100644
--- a/src/workbench/browser/src/app/pages/api/detail/body/api-detail-body.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/detail/body/api-detail-body.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, OnChanges, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
-import { ApiEditBody, ApiBodyType, JsonRootType } from '../../../../shared/services/storage/index.model';
+import { ApiEditBody, ApiBodyType, JsonRootType } from '../../../../../shared/services/storage/index.model';
 import { ApiDetailUtilService } from '../api-detail-util.service';
 @Component({
   selector: 'eo-api-detail-body',
diff --git a/src/workbench/browser/src/app/pages/api/detail/header/api-detail-header.component.html b/src/workbench/browser/src/app/pages/api/http/detail/header/api-detail-header.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/detail/header/api-detail-header.component.html
rename to src/workbench/browser/src/app/pages/api/http/detail/header/api-detail-header.component.html
diff --git a/src/workbench/browser/src/app/pages/api/detail/rest/api-detail-rest.component.scss b/src/workbench/browser/src/app/pages/api/http/detail/header/api-detail-header.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/detail/rest/api-detail-rest.component.scss
rename to src/workbench/browser/src/app/pages/api/http/detail/header/api-detail-header.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/detail/header/api-detail-header.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/detail/header/api-detail-header.component.spec.ts
similarity index 74%
rename from src/workbench/browser/src/app/pages/api/detail/header/api-detail-header.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/detail/header/api-detail-header.component.spec.ts
index c5ea6e162..6bbd57e0d 100644
--- a/src/workbench/browser/src/app/pages/api/detail/header/api-detail-header.component.spec.ts
+++ b/src/workbench/browser/src/app/pages/api/http/detail/header/api-detail-header.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ModalService } from '../../../../shared/services/modal.service';
+import { ModalService } from '../../../../../shared/services/modal.service';
 import { ApiDetailUtilService } from '../api-detail-util.service';
 
 import { ApiDetailHeaderComponent } from './api-detail-header.component';
@@ -10,10 +10,9 @@ describe('ApiDetailHeaderComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      providers:[ApiDetailUtilService,{provide:ModalService,useValue:{}}],
-      declarations: [ ApiDetailHeaderComponent ]
-    })
-    .compileComponents();
+      providers: [ApiDetailUtilService, { provide: ModalService, useValue: {} }],
+      declarations: [ApiDetailHeaderComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {
diff --git a/src/workbench/browser/src/app/pages/api/detail/header/api-detail-header.component.ts b/src/workbench/browser/src/app/pages/api/http/detail/header/api-detail-header.component.ts
similarity index 87%
rename from src/workbench/browser/src/app/pages/api/detail/header/api-detail-header.component.ts
rename to src/workbench/browser/src/app/pages/api/http/detail/header/api-detail-header.component.ts
index b6185d926..b7a0e0e46 100644
--- a/src/workbench/browser/src/app/pages/api/detail/header/api-detail-header.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/detail/header/api-detail-header.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
-import { ApiEditHeaders, ApiEditBody } from '../../../../shared/services/storage/index.model';
+import { ApiEditHeaders } from '../../../../../shared/services/storage/index.model';
 import { ApiDetailUtilService } from '../api-detail-util.service';
 
 @Component({
@@ -10,9 +10,8 @@ import { ApiDetailUtilService } from '../api-detail-util.service';
 export class ApiDetailHeaderComponent implements OnInit, OnChanges {
   @Input() model: ApiEditHeaders[];
   listConf: object = {};
-  private itemStructure: ApiEditBody = {
+  private itemStructure: ApiEditHeaders = {
     name: '',
-    type: 'string',
     required: true,
     example: '',
     enum: [],
diff --git a/src/workbench/browser/src/app/pages/api/detail/mock/api-detail-mock.component.html b/src/workbench/browser/src/app/pages/api/http/detail/mock/api-detail-mock.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/detail/mock/api-detail-mock.component.html
rename to src/workbench/browser/src/app/pages/api/http/detail/mock/api-detail-mock.component.html
diff --git a/src/workbench/browser/src/app/pages/api/edit/header/api-edit-header.component.scss b/src/workbench/browser/src/app/pages/api/http/detail/mock/api-detail-mock.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/edit/header/api-edit-header.component.scss
rename to src/workbench/browser/src/app/pages/api/http/detail/mock/api-detail-mock.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/detail/mock/api-detail-mock.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/detail/mock/api-detail-mock.component.spec.ts
similarity index 91%
rename from src/workbench/browser/src/app/pages/api/detail/mock/api-detail-mock.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/detail/mock/api-detail-mock.component.spec.ts
index 25179b3c6..4e800ce1c 100644
--- a/src/workbench/browser/src/app/pages/api/detail/mock/api-detail-mock.component.spec.ts
+++ b/src/workbench/browser/src/app/pages/api/http/detail/mock/api-detail-mock.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ModalService } from '../../../../shared/services/modal.service';
+import { ModalService } from '../../../../../shared/services/modal.service';
 import { ApiDetailUtilService } from '../api-detail-util.service';
 
 import { ApiDetailHeaderComponent } from './api-detail-mock.component';
diff --git a/src/workbench/browser/src/app/pages/api/detail/mock/api-detail-mock.component.ts b/src/workbench/browser/src/app/pages/api/http/detail/mock/api-detail-mock.component.ts
similarity index 89%
rename from src/workbench/browser/src/app/pages/api/detail/mock/api-detail-mock.component.ts
rename to src/workbench/browser/src/app/pages/api/http/detail/mock/api-detail-mock.component.ts
index 55acfcaf8..d3fc70287 100644
--- a/src/workbench/browser/src/app/pages/api/detail/mock/api-detail-mock.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/detail/mock/api-detail-mock.component.ts
@@ -1,11 +1,16 @@
 import { Component, OnChanges, OnInit, Input, SimpleChanges } from '@angular/core';
-import {  formatUri } from 'eo/workbench/browser/src/app/shared/services/api-test/api-test.utils';
+import { formatUri } from 'eo/workbench/browser/src/app/shared/services/api-test/api-test.utils';
 import { RemoteService } from 'eo/workbench/browser/src/app/shared/services/remote/remote.service';
 import { StorageService } from 'eo/workbench/browser/src/app/shared/services/storage/storage.service';
 import { copyText } from 'eo/workbench/browser/src/app/utils';
 import { tree2obj } from 'eo/workbench/browser/src/app/utils/tree/tree.utils';
 import { transferUrlAndQuery } from 'eo/workbench/browser/src/app/utils/api';
-import { ApiData, ApiMockEntity, StorageRes, StorageResStatus } from '../../../../shared/services/storage/index.model';
+import {
+  ApiData,
+  ApiMockEntity,
+  StorageRes,
+  StorageResStatus,
+} from '../../../../../shared/services/storage/index.model';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
@@ -59,14 +64,10 @@ export class ApiDetailMockComponent implements OnInit, OnChanges {
   }
 
   getApiUrl(mock?: ApiMockEntity) {
-    const uri = transferUrlAndQuery(
-      formatUri(this.apiData.uri, this.apiData.queryParams),
-      this.apiData.queryParams,
-      {
-        base: 'query',
-        replaceType: 'replace',
-      }
-    ).url;
+    const uri = transferUrlAndQuery(formatUri(this.apiData.uri, this.apiData.queryParams), this.apiData.queryParams, {
+      base: 'query',
+      replaceType: 'replace',
+    }).url;
     const url = new URL(`${this.mockUrl}/${uri}`.replace(/(?<!:)\/{2,}/g, '/'), 'https://github.com/');
     if (mock?.createWay === 'custom' && mock.uuid) {
       url.searchParams.set('mockID', mock.uuid + '');
@@ -133,4 +134,3 @@ export class ApiDetailMockComponent implements OnInit, OnChanges {
     this.message.success($localize`Copied`);
   }
 }
-
diff --git a/src/workbench/browser/src/app/pages/api/detail/query/api-detail-query.component.html b/src/workbench/browser/src/app/pages/api/http/detail/query/api-detail-query.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/detail/query/api-detail-query.component.html
rename to src/workbench/browser/src/app/pages/api/http/detail/query/api-detail-query.component.html
diff --git a/src/workbench/browser/src/app/pages/api/edit/query/api-edit-query.component.scss b/src/workbench/browser/src/app/pages/api/http/detail/query/api-detail-query.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/edit/query/api-edit-query.component.scss
rename to src/workbench/browser/src/app/pages/api/http/detail/query/api-detail-query.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/detail/query/api-detail-query.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/detail/query/api-detail-query.component.spec.ts
similarity index 74%
rename from src/workbench/browser/src/app/pages/api/detail/query/api-detail-query.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/detail/query/api-detail-query.component.spec.ts
index 9c466684f..1a50c8342 100644
--- a/src/workbench/browser/src/app/pages/api/detail/query/api-detail-query.component.spec.ts
+++ b/src/workbench/browser/src/app/pages/api/http/detail/query/api-detail-query.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ModalService } from '../../../../shared/services/modal.service';
+import { ModalService } from '../../../../../shared/services/modal.service';
 import { ApiDetailUtilService } from '../api-detail-util.service';
 
 import { ApiDetailQueryComponent } from './api-detail-query.component';
@@ -10,10 +10,9 @@ describe('ApiDetailQueryComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      providers:[ApiDetailUtilService,{provide:ModalService,useValue:{}}],
-      declarations: [ ApiDetailQueryComponent ]
-    })
-    .compileComponents();
+      providers: [ApiDetailUtilService, { provide: ModalService, useValue: {} }],
+      declarations: [ApiDetailQueryComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {
diff --git a/src/workbench/browser/src/app/pages/api/detail/query/api-detail-query.component.ts b/src/workbench/browser/src/app/pages/api/http/detail/query/api-detail-query.component.ts
similarity index 88%
rename from src/workbench/browser/src/app/pages/api/detail/query/api-detail-query.component.ts
rename to src/workbench/browser/src/app/pages/api/http/detail/query/api-detail-query.component.ts
index c99310cd4..3df21eb65 100644
--- a/src/workbench/browser/src/app/pages/api/detail/query/api-detail-query.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/detail/query/api-detail-query.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { ApiEditQuery } from '../../../../shared/services/storage/index.model';
+import { ApiEditQuery } from '../../../../../shared/services/storage/index.model';
 import { ApiDetailUtilService } from '../api-detail-util.service';
 
 @Component({
diff --git a/src/workbench/browser/src/app/pages/api/detail/rest/api-detail-rest.component.html b/src/workbench/browser/src/app/pages/api/http/detail/rest/api-detail-rest.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/detail/rest/api-detail-rest.component.html
rename to src/workbench/browser/src/app/pages/api/http/detail/rest/api-detail-rest.component.html
diff --git a/src/workbench/browser/src/app/pages/api/edit/rest/api-edit-rest.component.scss b/src/workbench/browser/src/app/pages/api/http/detail/rest/api-detail-rest.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/edit/rest/api-edit-rest.component.scss
rename to src/workbench/browser/src/app/pages/api/http/detail/rest/api-detail-rest.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/detail/rest/api-detail-rest.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/detail/rest/api-detail-rest.component.spec.ts
similarity index 74%
rename from src/workbench/browser/src/app/pages/api/detail/rest/api-detail-rest.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/detail/rest/api-detail-rest.component.spec.ts
index 404532e5d..4162f8ebe 100644
--- a/src/workbench/browser/src/app/pages/api/detail/rest/api-detail-rest.component.spec.ts
+++ b/src/workbench/browser/src/app/pages/api/http/detail/rest/api-detail-rest.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ModalService } from '../../../../shared/services/modal.service';
+import { ModalService } from '../../../../../shared/services/modal.service';
 import { ApiDetailUtilService } from '../api-detail-util.service';
 
 import { ApiDetailRestComponent } from './api-detail-rest.component';
@@ -10,10 +10,9 @@ describe('ApiDetailRestComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      providers:[ApiDetailUtilService,{provide:ModalService,useValue:{}}],
-      declarations: [ ApiDetailRestComponent ]
-    })
-    .compileComponents();
+      providers: [ApiDetailUtilService, { provide: ModalService, useValue: {} }],
+      declarations: [ApiDetailRestComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {
diff --git a/src/workbench/browser/src/app/pages/api/detail/rest/api-detail-rest.component.ts b/src/workbench/browser/src/app/pages/api/http/detail/rest/api-detail-rest.component.ts
similarity index 88%
rename from src/workbench/browser/src/app/pages/api/detail/rest/api-detail-rest.component.ts
rename to src/workbench/browser/src/app/pages/api/http/detail/rest/api-detail-rest.component.ts
index da472efeb..dd7862cc4 100644
--- a/src/workbench/browser/src/app/pages/api/detail/rest/api-detail-rest.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/detail/rest/api-detail-rest.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { ApiEditRest } from '../../../../shared/services/storage/index.model';
+import { ApiEditRest } from '../../../../../shared/services/storage/index.model';
 import { ApiDetailUtilService } from '../api-detail-util.service';
 @Component({
   selector: 'eo-api-detail-rest',
diff --git a/src/workbench/browser/src/app/pages/api/edit/api-edit-util.service.ts b/src/workbench/browser/src/app/pages/api/http/edit/api-edit-util.service.ts
similarity index 97%
rename from src/workbench/browser/src/app/pages/api/edit/api-edit-util.service.ts
rename to src/workbench/browser/src/app/pages/api/http/edit/api-edit-util.service.ts
index f56da6c71..ff31ba97b 100644
--- a/src/workbench/browser/src/app/pages/api/edit/api-edit-util.service.ts
+++ b/src/workbench/browser/src/app/pages/api/http/edit/api-edit-util.service.ts
@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
-import { ModalService } from '../../../shared/services/modal.service';
+import { ModalService } from '../../../../shared/services/modal.service';
 import { ApiParamsExtraSettingComponent } from './extra-setting/api-params-extra-setting.component';
 import { listToTreeHasLevel } from 'eo/workbench/browser/src/app/utils/tree/tree.utils';
-import { ApiData, ApiEditRest } from '../../../shared/services/storage/index.model';
-import { treeToListHasLevel } from '../../../utils/tree/tree.utils';
-import { getRest } from '../../../utils/api';
+import { ApiData, ApiEditRest } from '../../../../shared/services/storage/index.model';
+import { treeToListHasLevel } from '../../../../utils/tree/tree.utils';
+import { getRest } from '../../../../utils/api';
 import { eoDeepCopy } from 'eo/workbench/browser/src/app/utils';
 @Injectable()
 export class ApiEditUtilService {
diff --git a/src/workbench/browser/src/app/pages/api/edit/api-edit.component.html b/src/workbench/browser/src/app/pages/api/http/edit/api-edit.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/edit/api-edit.component.html
rename to src/workbench/browser/src/app/pages/api/http/edit/api-edit.component.html
diff --git a/src/workbench/browser/src/app/pages/api/edit/api-edit.component.scss b/src/workbench/browser/src/app/pages/api/http/edit/api-edit.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/edit/api-edit.component.scss
rename to src/workbench/browser/src/app/pages/api/http/edit/api-edit.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/edit/api-edit.component.ts b/src/workbench/browser/src/app/pages/api/http/edit/api-edit.component.ts
similarity index 93%
rename from src/workbench/browser/src/app/pages/api/edit/api-edit.component.ts
rename to src/workbench/browser/src/app/pages/api/http/edit/api-edit.component.ts
index 76c42753c..81b28b286 100644
--- a/src/workbench/browser/src/app/pages/api/edit/api-edit.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/edit/api-edit.component.ts
@@ -6,8 +6,8 @@ import { NzTreeSelectComponent } from 'ng-zorro-antd/tree-select';
 
 import { Subject } from 'rxjs';
 import { debounceTime, take, takeUntil } from 'rxjs/operators';
-import { MessageService } from '../../../shared/services/message';
-import { StorageService } from '../../../shared/services/storage';
+import { MessageService } from '../../../../shared/services/message';
+import { StorageService } from '../../../../shared/services/storage';
 
 import {
   Group,
@@ -16,14 +16,14 @@ import {
   RequestMethod,
   StorageRes,
   StorageResStatus,
-} from '../../../shared/services/storage/index.model';
+} from '../../../../shared/services/storage/index.model';
 
-import { eoDeepCopy, isEmptyObj, objectToArray } from '../../../utils';
-import { listToTree, getExpandGroupByKey } from '../../../utils/tree/tree.utils';
-import { ApiParamsNumPipe } from '../../../shared/pipes/api-param-num.pipe';
-import { ApiEditService } from 'eo/workbench/browser/src/app/pages/api/edit/api-edit.service';
+import { eoDeepCopy, isEmptyObj, objectToArray } from '../../../../utils';
+import { listToTree, getExpandGroupByKey } from '../../../../utils/tree/tree.utils';
+import { ApiParamsNumPipe } from '../../../../shared/pipes/api-param-num.pipe';
+import { ApiEditService } from 'eo/workbench/browser/src/app/pages/api/http/edit/api-edit.service';
 import { ApiEditUtilService } from './api-edit-util.service';
-import { EoMessageService } from '../../../eoui/message/eo-message.service';
+import { EoMessageService } from '../../../../eoui/message/eo-message.service';
 @Component({
   selector: 'eo-api-edit-edit',
   templateUrl: './api-edit.component.html',
@@ -130,7 +130,7 @@ export class ApiEditComponent implements OnInit, OnDestroy {
     if (result.status === StorageResStatus.success) {
       this.message.success(title);
       this.initialModel = this.apiEditUtil.getFormdataFromApiData(eoDeepCopy(result.data));
-      this.router.navigate(['/home/api/detail'], {
+      this.router.navigate(['/home/api/http/detail'], {
         queryParams: {
           pageID: Number(this.route.snapshot.queryParams.pageID),
           uuid: result.data.uuid,
diff --git a/src/workbench/browser/src/app/pages/api/edit/api-edit.module.ts b/src/workbench/browser/src/app/pages/api/http/edit/api-edit.module.ts
similarity index 86%
rename from src/workbench/browser/src/app/pages/api/edit/api-edit.module.ts
rename to src/workbench/browser/src/app/pages/api/http/edit/api-edit.module.ts
index fcc072558..066b6e59e 100644
--- a/src/workbench/browser/src/app/pages/api/edit/api-edit.module.ts
+++ b/src/workbench/browser/src/app/pages/api/http/edit/api-edit.module.ts
@@ -2,10 +2,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import { Ng1Module } from '../../../ng1/ng1.module';
-import { EouiModule } from '../../../eoui/eoui.module';
-import { SharedModule } from '../../../shared/shared.module';
-import { ParamsImportModule } from '../../../shared/components/params-import/params-import.module';
+import { Ng1Module } from '../../../../ng1/ng1.module';
+import { EouiModule } from '../../../../eoui/eoui.module';
+import { SharedModule } from '../../../../shared/shared.module';
+import { ParamsImportModule } from '../../../../shared/components/params-import/params-import.module';
 
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzModalModule } from 'ng-zorro-antd/modal';
@@ -29,7 +29,7 @@ import { ApiEditRestComponent } from './rest/api-edit-rest.component';
 import { ApiParamsExtraSettingComponent } from './extra-setting/api-params-extra-setting.component';
 
 import { ApiEditUtilService } from './api-edit-util.service';
-import { ApiEditService } from 'eo/workbench/browser/src/app/pages/api/edit/api-edit.service';
+import { ApiEditService } from 'eo/workbench/browser/src/app/pages/api/http/edit/api-edit.service';
 import { RouterModule } from '@angular/router';
 
 const NZ_COMPONETS = [
@@ -73,6 +73,6 @@ const COMPONENTS = [
     SharedModule,
     ParamsImportModule,
   ],
-  providers: [ApiEditUtilService,ApiEditService],
+  providers: [ApiEditUtilService, ApiEditService],
 })
 export class ApiEditModule {}
diff --git a/src/workbench/browser/src/app/pages/api/edit/api-edit.service.ts b/src/workbench/browser/src/app/pages/api/http/edit/api-edit.service.ts
similarity index 84%
rename from src/workbench/browser/src/app/pages/api/edit/api-edit.service.ts
rename to src/workbench/browser/src/app/pages/api/http/edit/api-edit.service.ts
index 9d4cfc53b..2e221ce8a 100644
--- a/src/workbench/browser/src/app/pages/api/edit/api-edit.service.ts
+++ b/src/workbench/browser/src/app/pages/api/http/edit/api-edit.service.ts
@@ -1,8 +1,14 @@
 import { Injectable } from '@angular/core';
 import { ApiService } from 'eo/workbench/browser/src/app/pages/api/api.service';
 import { StorageService } from 'eo/workbench/browser/src/app/shared/services/storage';
-import { ApiBodyType, ApiData, ApiEditViewData, JsonRootType, StorageRes } from 'eo/workbench/browser/src/app/shared/services/storage/index.model';
-import { RequestMethod, RequestProtocol } from '../../../shared/services/storage/index.model';
+import {
+  ApiBodyType,
+  ApiData,
+  ApiEditViewData,
+  JsonRootType,
+  StorageRes,
+} from 'eo/workbench/browser/src/app/shared/services/storage/index.model';
+import { RequestMethod, RequestProtocol } from '../../../../shared/services/storage/index.model';
 import { ApiEditUtilService } from './api-edit-util.service';
 @Injectable()
 export class ApiEditService {
@@ -36,7 +42,7 @@ export class ApiEditService {
     );
   }
   async getApi({ id, groupID }): Promise<ApiEditViewData> {
-    let result= {} as ApiData;
+    let result = {} as ApiData;
     if (!id) {
       // From test page/copy api data;
       let tmpApiData = window.sessionStorage.getItem('apiDataWillbeSave');
@@ -49,13 +55,13 @@ export class ApiEditService {
           //Filter useless keyName
           result[keyName] = tmpApiData[keyName];
         });
-        result.projectID=pureApi.projectID;
+        result.projectID = pureApi.projectID;
       } else {
         //Add directly
         result = pureApi;
       }
     } else {
-      result = (await this.apiService.get(id));
+      result = await this.apiService.get(id);
     }
     return this.apiEditUtil.getFormdataFromApiData(result);
   }
diff --git a/src/workbench/browser/src/app/pages/api/edit/body/api-edit-body.component.html b/src/workbench/browser/src/app/pages/api/http/edit/body/api-edit-body.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/edit/body/api-edit-body.component.html
rename to src/workbench/browser/src/app/pages/api/http/edit/body/api-edit-body.component.html
diff --git a/src/workbench/browser/src/app/pages/api/edit/body/api-edit-body.component.scss b/src/workbench/browser/src/app/pages/api/http/edit/body/api-edit-body.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/edit/body/api-edit-body.component.scss
rename to src/workbench/browser/src/app/pages/api/http/edit/body/api-edit-body.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/edit/body/api-edit-body.component.ts b/src/workbench/browser/src/app/pages/api/http/edit/body/api-edit-body.component.ts
similarity index 98%
rename from src/workbench/browser/src/app/pages/api/edit/body/api-edit-body.component.ts
rename to src/workbench/browser/src/app/pages/api/http/edit/body/api-edit-body.component.ts
index 12a199eff..7eb2b6f31 100644
--- a/src/workbench/browser/src/app/pages/api/edit/body/api-edit-body.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/edit/body/api-edit-body.component.ts
@@ -8,7 +8,7 @@ import {
   ApiEditBody,
   ApiBodyType,
   JsonRootType,
-} from '../../../../shared/services/storage/index.model';
+} from '../../../../../shared/services/storage/index.model';
 import { ApiEditUtilService } from '../api-edit-util.service';
 @Component({
   selector: 'eo-api-edit-body',
@@ -66,7 +66,7 @@ export class ApiEditBodyComponent implements OnInit, OnChanges, OnDestroy {
       }
     }
   }
-  jsonRootTypeDataChange(jsonRootType){
+  jsonRootTypeDataChange(jsonRootType) {
     this.jsonRootTypeChange.emit(jsonRootType);
     this.modelChange.emit(this.model);
   }
diff --git a/src/workbench/browser/src/app/pages/api/edit/extra-setting/api-params-extra-setting.component.html b/src/workbench/browser/src/app/pages/api/http/edit/extra-setting/api-params-extra-setting.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/edit/extra-setting/api-params-extra-setting.component.html
rename to src/workbench/browser/src/app/pages/api/http/edit/extra-setting/api-params-extra-setting.component.html
diff --git a/src/workbench/browser/src/app/pages/api/edit/extra-setting/api-params-extra-setting.component.scss b/src/workbench/browser/src/app/pages/api/http/edit/extra-setting/api-params-extra-setting.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/edit/extra-setting/api-params-extra-setting.component.scss
rename to src/workbench/browser/src/app/pages/api/http/edit/extra-setting/api-params-extra-setting.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/edit/extra-setting/api-params-extra-setting.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/edit/extra-setting/api-params-extra-setting.component.spec.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/edit/extra-setting/api-params-extra-setting.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/edit/extra-setting/api-params-extra-setting.component.spec.ts
diff --git a/src/workbench/browser/src/app/pages/api/edit/extra-setting/api-params-extra-setting.component.ts b/src/workbench/browser/src/app/pages/api/http/edit/extra-setting/api-params-extra-setting.component.ts
similarity index 95%
rename from src/workbench/browser/src/app/pages/api/edit/extra-setting/api-params-extra-setting.component.ts
rename to src/workbench/browser/src/app/pages/api/http/edit/extra-setting/api-params-extra-setting.component.ts
index b87eeb15b..43e41411b 100644
--- a/src/workbench/browser/src/app/pages/api/edit/extra-setting/api-params-extra-setting.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/edit/extra-setting/api-params-extra-setting.component.ts
@@ -1,5 +1,9 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { ApiParamsTypeJsonOrXml, ParamsEnum, BasiApiEditParams } from '../../../../shared/services/storage/index.model';
+import {
+  ApiParamsTypeJsonOrXml,
+  ParamsEnum,
+  BasiApiEditParams,
+} from '../../../../../shared/services/storage/index.model';
 
 @Component({
   selector: 'eo-api-edit-params-extra-setting',
diff --git a/src/workbench/browser/src/app/pages/api/edit/header/api-edit-header.component.html b/src/workbench/browser/src/app/pages/api/http/edit/header/api-edit-header.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/edit/header/api-edit-header.component.html
rename to src/workbench/browser/src/app/pages/api/http/edit/header/api-edit-header.component.html
diff --git a/src/workbench/browser/src/app/pages/api/mock/api-mock.component.scss b/src/workbench/browser/src/app/pages/api/http/edit/header/api-edit-header.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/mock/api-mock.component.scss
rename to src/workbench/browser/src/app/pages/api/http/edit/header/api-edit-header.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/edit/header/api-edit-header.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/edit/header/api-edit-header.component.spec.ts
similarity index 92%
rename from src/workbench/browser/src/app/pages/api/edit/header/api-edit-header.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/edit/header/api-edit-header.component.spec.ts
index b87f4ac9e..dcf9b4836 100644
--- a/src/workbench/browser/src/app/pages/api/edit/header/api-edit-header.component.spec.ts
+++ b/src/workbench/browser/src/app/pages/api/http/edit/header/api-edit-header.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NzModalModule, NzModalService } from 'ng-zorro-antd/modal';
-import { ModalService } from '../../../../shared/services/modal.service';
+import { ModalService } from '../../../../../shared/services/modal.service';
 import { ApiEditUtilService } from '../api-edit-util.service';
 
 import { ApiEditHeaderComponent } from './api-edit-header.component';
diff --git a/src/workbench/browser/src/app/pages/api/edit/header/api-edit-header.component.ts b/src/workbench/browser/src/app/pages/api/http/edit/header/api-edit-header.component.ts
similarity index 95%
rename from src/workbench/browser/src/app/pages/api/edit/header/api-edit-header.component.ts
rename to src/workbench/browser/src/app/pages/api/http/edit/header/api-edit-header.component.ts
index 59610c263..7100511ae 100644
--- a/src/workbench/browser/src/app/pages/api/edit/header/api-edit-header.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/edit/header/api-edit-header.component.ts
@@ -8,7 +8,7 @@ import {
   Output,
   EventEmitter,
 } from '@angular/core';
-import { ApiEditHeaders } from '../../../../shared/services/storage/index.model';
+import { ApiEditHeaders } from '../../../../../shared/services/storage/index.model';
 import { ApiEditUtilService } from '../api-edit-util.service';
 @Component({
   selector: 'eo-api-edit-header',
diff --git a/src/workbench/browser/src/app/pages/api/edit/query/api-edit-query.component.html b/src/workbench/browser/src/app/pages/api/http/edit/query/api-edit-query.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/edit/query/api-edit-query.component.html
rename to src/workbench/browser/src/app/pages/api/http/edit/query/api-edit-query.component.html
diff --git a/src/workbench/browser/src/app/pages/api/test/header/api-test-header.component.scss b/src/workbench/browser/src/app/pages/api/http/edit/query/api-edit-query.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/header/api-test-header.component.scss
rename to src/workbench/browser/src/app/pages/api/http/edit/query/api-edit-query.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/edit/query/api-edit-query.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/edit/query/api-edit-query.component.spec.ts
similarity index 75%
rename from src/workbench/browser/src/app/pages/api/edit/query/api-edit-query.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/edit/query/api-edit-query.component.spec.ts
index 39ed23aac..7b96da771 100644
--- a/src/workbench/browser/src/app/pages/api/edit/query/api-edit-query.component.spec.ts
+++ b/src/workbench/browser/src/app/pages/api/http/edit/query/api-edit-query.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NzModalModule } from 'ng-zorro-antd/modal';
-import { ModalService } from '../../../../shared/services/modal.service';
+import { ModalService } from '../../../../../shared/services/modal.service';
 import { ApiEditUtilService } from '../api-edit-util.service';
 
 import { ApiEditQueryComponent } from './api-edit-query.component';
@@ -11,11 +11,10 @@ describe('ApiEditQueryComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports:[NzModalModule],
-      providers:[ApiEditUtilService,ModalService],
-      declarations: [ ApiEditQueryComponent ]
-    })
-    .compileComponents();
+      imports: [NzModalModule],
+      providers: [ApiEditUtilService, ModalService],
+      declarations: [ApiEditQueryComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {
diff --git a/src/workbench/browser/src/app/pages/api/edit/query/api-edit-query.component.ts b/src/workbench/browser/src/app/pages/api/http/edit/query/api-edit-query.component.ts
similarity index 86%
rename from src/workbench/browser/src/app/pages/api/edit/query/api-edit-query.component.ts
rename to src/workbench/browser/src/app/pages/api/http/edit/query/api-edit-query.component.ts
index f9f581583..76989fc07 100644
--- a/src/workbench/browser/src/app/pages/api/edit/query/api-edit-query.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/edit/query/api-edit-query.component.ts
@@ -1,5 +1,14 @@
-import { Component, OnInit, Input, ChangeDetectorRef, AfterViewChecked, OnChanges, Output, EventEmitter } from '@angular/core';
-import { ApiEditQuery } from '../../../../shared/services/storage/index.model';
+import {
+  Component,
+  OnInit,
+  Input,
+  ChangeDetectorRef,
+  AfterViewChecked,
+  OnChanges,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { ApiEditQuery } from '../../../../../shared/services/storage/index.model';
 import { ApiEditUtilService } from '../api-edit-util.service';
 
 @Component({
@@ -43,7 +52,7 @@ export class ApiEditQueryComponent implements OnInit, OnChanges, AfterViewChecke
       },
       watchFormLastChange: () => {
         this.modelChange.emit(this.model);
-      }
+      },
     });
   }
 }
diff --git a/src/workbench/browser/src/app/pages/api/edit/rest/api-edit-rest.component.html b/src/workbench/browser/src/app/pages/api/http/edit/rest/api-edit-rest.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/edit/rest/api-edit-rest.component.html
rename to src/workbench/browser/src/app/pages/api/http/edit/rest/api-edit-rest.component.html
diff --git a/src/workbench/browser/src/app/pages/api/test/query/api-test-query.component.scss b/src/workbench/browser/src/app/pages/api/http/edit/rest/api-edit-rest.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/query/api-test-query.component.scss
rename to src/workbench/browser/src/app/pages/api/http/edit/rest/api-edit-rest.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/edit/rest/api-edit-rest.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/edit/rest/api-edit-rest.component.spec.ts
similarity index 91%
rename from src/workbench/browser/src/app/pages/api/edit/rest/api-edit-rest.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/edit/rest/api-edit-rest.component.spec.ts
index 11e7336f3..cd47d6bc4 100644
--- a/src/workbench/browser/src/app/pages/api/edit/rest/api-edit-rest.component.spec.ts
+++ b/src/workbench/browser/src/app/pages/api/http/edit/rest/api-edit-rest.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ModalService } from '../../../../shared/services/modal.service';
+import { ModalService } from '../../../../../shared/services/modal.service';
 import { ApiEditUtilService } from '../api-edit-util.service';
 
 import { ApiEditRestComponent } from './api-edit-rest.component';
diff --git a/src/workbench/browser/src/app/pages/api/edit/rest/api-edit-rest.component.ts b/src/workbench/browser/src/app/pages/api/http/edit/rest/api-edit-rest.component.ts
similarity index 86%
rename from src/workbench/browser/src/app/pages/api/edit/rest/api-edit-rest.component.ts
rename to src/workbench/browser/src/app/pages/api/http/edit/rest/api-edit-rest.component.ts
index bc616e048..846b5ca49 100644
--- a/src/workbench/browser/src/app/pages/api/edit/rest/api-edit-rest.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/edit/rest/api-edit-rest.component.ts
@@ -1,5 +1,14 @@
-import { Component, OnInit, Input, ChangeDetectorRef, AfterViewChecked, OnChanges, EventEmitter, Output } from '@angular/core';
-import { ApiEditRest } from '../../../../shared/services/storage/index.model';
+import {
+  Component,
+  OnInit,
+  Input,
+  ChangeDetectorRef,
+  AfterViewChecked,
+  OnChanges,
+  EventEmitter,
+  Output,
+} from '@angular/core';
+import { ApiEditRest } from '../../../../../shared/services/storage/index.model';
 import { ApiEditUtilService } from '../api-edit-util.service';
 @Component({
   selector: 'eo-api-edit-rest',
diff --git a/src/workbench/browser/src/app/pages/api/mock/api-mock.component.html b/src/workbench/browser/src/app/pages/api/http/mock/api-mock.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/mock/api-mock.component.html
rename to src/workbench/browser/src/app/pages/api/http/mock/api-mock.component.html
diff --git a/src/workbench/browser/src/app/pages/api/test/rest/api-test-rest.component.scss b/src/workbench/browser/src/app/pages/api/http/mock/api-mock.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/rest/api-test-rest.component.scss
rename to src/workbench/browser/src/app/pages/api/http/mock/api-mock.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/mock/api-mock.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/mock/api-mock.component.spec.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/mock/api-mock.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/mock/api-mock.component.spec.ts
diff --git a/src/workbench/browser/src/app/pages/api/mock/api-mock.component.ts b/src/workbench/browser/src/app/pages/api/http/mock/api-mock.component.ts
similarity index 96%
rename from src/workbench/browser/src/app/pages/api/mock/api-mock.component.ts
rename to src/workbench/browser/src/app/pages/api/http/mock/api-mock.component.ts
index 542415c5d..736706bba 100644
--- a/src/workbench/browser/src/app/pages/api/mock/api-mock.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/mock/api-mock.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { ApiData, ApiMockEntity, StorageRes, StorageResStatus } from '../../../shared/services/storage/index.model';
+import { ApiData, ApiMockEntity, StorageRes, StorageResStatus } from '../../../../shared/services/storage/index.model';
 import { Subject } from 'rxjs';
 import { takeUntil, debounceTime } from 'rxjs/operators';
 import { StorageService } from 'eo/workbench/browser/src/app/shared/services/storage/storage.service';
@@ -78,7 +78,6 @@ export class ApiMockComponent implements OnInit {
     this.initMockList(Number(this.route.snapshot.queryParams.uuid));
   }
 
-
   async initMockList(apiDataID: number) {
     const mockRes = await this.getMockByApiDataID(apiDataID);
     this.apiData = await this.getApiData(apiDataID);
@@ -90,14 +89,10 @@ export class ApiMockComponent implements OnInit {
   }
 
   getApiUrl(mock?: ApiMockEntity) {
-    const uri = transferUrlAndQuery(
-      formatUri(this.apiData.uri, this.apiData.restParams),
-      this.apiData.queryParams,
-      {
-        base: 'query',
-        replaceType: 'replace',
-      }
-    ).url;
+    const uri = transferUrlAndQuery(formatUri(this.apiData.uri, this.apiData.restParams), this.apiData.queryParams, {
+      base: 'query',
+      replaceType: 'replace',
+    }).url;
     const url = new URL(`${this.mockUrl}/${uri}`.replace(/(?<!:)\/{2,}/g, '/'), 'https://github.com/');
     if (mock?.createWay === 'custom' && mock.uuid) {
       url.searchParams.set('mockID', mock.uuid + '');
diff --git a/src/workbench/browser/src/app/pages/api/mock/api-mock.module.ts b/src/workbench/browser/src/app/pages/api/http/mock/api-mock.module.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/mock/api-mock.module.ts
rename to src/workbench/browser/src/app/pages/api/http/mock/api-mock.module.ts
diff --git a/src/workbench/browser/src/app/pages/api/test/api-test-util.service.ts b/src/workbench/browser/src/app/pages/api/http/test/api-test-util.service.ts
similarity index 97%
rename from src/workbench/browser/src/app/pages/api/test/api-test-util.service.ts
rename to src/workbench/browser/src/app/pages/api/http/test/api-test-util.service.ts
index e8166f8bc..f2127a515 100644
--- a/src/workbench/browser/src/app/pages/api/test/api-test-util.service.ts
+++ b/src/workbench/browser/src/app/pages/api/http/test/api-test-util.service.ts
@@ -2,10 +2,10 @@ import { Injectable } from '@angular/core';
 import { whatType } from 'eo/workbench/browser/src/app/utils';
 import { transferUrlAndQuery } from 'eo/workbench/browser/src/app/utils/api';
 import { listToTreeHasLevel } from 'eo/workbench/browser/src/app/utils/tree/tree.utils';
-import { ApiTestHeaders, ContentTypeByAbridge } from '../../../shared/services/api-test/api-test.model';
-import { ApiBodyType, ApiData, ApiTestData, ApiTestHistory } from '../../../shared/services/storage/index.model';
-import { eoDeepCopy } from '../../../utils';
-import { uiData2Json, text2UiData, json2XML } from '../../../utils/data-transfer/data-transfer.utils';
+import { ApiTestHeaders, ContentTypeByAbridge } from '../../../../shared/services/api-test/api-test.model';
+import { ApiBodyType, ApiData, ApiTestData, ApiTestHistory } from '../../../../shared/services/storage/index.model';
+import { eoDeepCopy } from '../../../../utils';
+import { uiData2Json, text2UiData, json2XML } from '../../../../utils/data-transfer/data-transfer.utils';
 
 @Injectable()
 export class ApiTestUtilService {
diff --git a/src/workbench/browser/src/app/pages/api/test/api-test.component.html b/src/workbench/browser/src/app/pages/api/http/test/api-test.component.html
similarity index 93%
rename from src/workbench/browser/src/app/pages/api/test/api-test.component.html
rename to src/workbench/browser/src/app/pages/api/http/test/api-test.component.html
index aac348371..8da1a8b03 100644
--- a/src/workbench/browser/src/app/pages/api/test/api-test.component.html
+++ b/src/workbench/browser/src/app/pages/api/http/test/api-test.component.html
@@ -21,7 +21,11 @@
             {{ env.hostUri }}
           </div>
           <nz-form-item nz-col class="fg1">
-            <nz-form-control [nzValidateStatus]="this.validateForm.controls.uri" i18n-nzErrorTip nzErrorTip="Please enter URL">
+            <nz-form-control
+              [nzValidateStatus]="this.validateForm.controls.uri"
+              i18n-nzErrorTip
+              nzErrorTip="Please enter URL"
+            >
               <input
                 type="text"
                 i18n-placeholder
@@ -39,7 +43,15 @@
             <span *ngIf="status === 'testing'" i18n>Abort</span>
             <span *ngIf="status === 'testing' && waitSeconds" class="ml-1">{{ waitSeconds }}</span>
           </button>
-          <button type="button" *ngIf="!route.snapshot.queryParams.uuid||route.snapshot.queryParams.uuid.includes('history_')" nz-button nzType="default" (click)="saveApi()" class="ml10" i18n>
+          <button
+            type="button"
+            *ngIf="!route.snapshot.queryParams.uuid || route.snapshot.queryParams.uuid.includes('history_')"
+            nz-button
+            nzType="default"
+            (click)="saveApi()"
+            class="ml10"
+            i18n
+          >
             Save as API
           </button>
         </nz-input-group>
@@ -79,7 +91,7 @@
           </ng-template>
           <eo-api-test-body
             class="eo_theme_iblock bbd"
-            [(contentType)]="contentType"
+            [(contentType)]="model.contentType"
             (contentTypeChange)="changeContentType($event)"
             [(bodyType)]="model.request.requestBodyType"
             (bodyTypeChange)="changeBodyType($event)"
diff --git a/src/workbench/browser/src/app/pages/api/test/api-test.component.scss b/src/workbench/browser/src/app/pages/api/http/test/api-test.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/api-test.component.scss
rename to src/workbench/browser/src/app/pages/api/http/test/api-test.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/test/api-test.component.ts b/src/workbench/browser/src/app/pages/api/http/test/api-test.component.ts
similarity index 88%
rename from src/workbench/browser/src/app/pages/api/test/api-test.component.ts
rename to src/workbench/browser/src/app/pages/api/http/test/api-test.component.ts
index a5dcadd40..3e66139e6 100644
--- a/src/workbench/browser/src/app/pages/api/test/api-test.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/test/api-test.component.ts
@@ -9,22 +9,19 @@ import {
   ApiTestHistoryFrame,
   RequestMethod,
   RequestProtocol,
-} from '../../../shared/services/storage/index.model';
-import { MessageService } from '../../../shared/services/message';
+} from '../../../../shared/services/storage/index.model';
+import { MessageService } from '../../../../shared/services/message';
 
 import { interval, Subscription, Observable, Subject } from 'rxjs';
 import { takeUntil, distinctUntilChanged } from 'rxjs/operators';
 
-import { TestServerService } from '../../../shared/services/api-test/test-server.service';
+import { TestServerService } from '../../../../shared/services/api-test/test-server.service';
 import { ApiTestUtilService } from './api-test-util.service';
-import { eoDeepCopy, isEmptyObj, objectToArray } from '../../../utils';
+import { eoDeepCopy, isEmptyObj, objectToArray } from '../../../../utils';
 
-import { EnvState } from '../../../shared/store/env.state';
-import { ApiParamsNumPipe } from '../../../shared/pipes/api-param-num.pipe';
+import { EnvState } from '../../../../shared/store/env.state';
+import { ApiParamsNumPipe } from '../../../../shared/pipes/api-param-num.pipe';
 import { ApiTestService } from './api-test.service';
-import { TestServerLocalNodeService } from '../../../shared/services/api-test/local-node/test-connect.service';
-import { TestServerServerlessService } from '../../../shared/services/api-test/serverless-node/test-connect.service';
-import { TestServerRemoteService } from 'eo/workbench/browser/src/app/shared/services/api-test/remote-node/test-connect.service';
 import { ApiTestRes } from 'eo/workbench/browser/src/app/shared/services/api-test/test-server.model';
 import {
   BEFORE_DATA,
@@ -43,6 +40,7 @@ interface testViewModel {
   beforeScript: string;
   afterScript: string;
   testStartTime?: number;
+  contentType: ContentTypeByAbridge;
   requestTabIndex: number;
   responseTabIndex: number;
   testResult: {
@@ -62,7 +60,8 @@ export class ApiTestComponent implements OnInit, OnDestroy {
    * * Usually restored from tab
    */
   @Input() initialModel: testViewModel;
-  @Output() modelChange = new EventEmitter<testViewModel | any>();
+  @Output() modelChange = new EventEmitter<testViewModel>();
+  @Output() afterTested = new EventEmitter<any>();
   @Output() eoOnInit = new EventEmitter<testViewModel>();
   @Select(EnvState) env$: Observable<any>;
   validateForm!: FormGroup;
@@ -70,7 +69,6 @@ export class ApiTestComponent implements OnInit, OnDestroy {
     parameters: [],
     hostUri: '',
   };
-  contentType: ContentTypeByAbridge = ContentTypeByAbridge.JSON;
   BEFORE_DATA = BEFORE_DATA;
   AFTER_DATA = AFTER_DATA;
 
@@ -82,7 +80,6 @@ export class ApiTestComponent implements OnInit, OnDestroy {
 
   isRequestBodyLoaded = false;
   initHeight = localStorage.getItem(API_TEST_DRAG_TOP_HEIGHT_KEY) || '45%';
-  testServer: TestServerLocalNodeService | TestServerServerlessService | TestServerRemoteService;
   REQUEST_METHOD = objectToArray(RequestMethod);
   REQUEST_PROTOCOL = objectToArray(RequestProtocol);
   MAX_TEST_SECONDS = 60;
@@ -99,12 +96,11 @@ export class ApiTestComponent implements OnInit, OnDestroy {
     private ref: ChangeDetectorRef,
     private apiTest: ApiTestService,
     private apiTestUtil: ApiTestUtilService,
-    private testServerService: TestServerService,
+    private testServer: TestServerService,
     private messageService: MessageService,
     private lang: LanguageService
   ) {
     this.initBasicForm();
-    this.testServer = this.testServerService.instance;
     this.testServer.init((message) => {
       this.receiveMessage(message);
     });
@@ -114,7 +110,6 @@ export class ApiTestComponent implements OnInit, OnDestroy {
   }
   /**
    * Restore data from history
-   *
    */
   restoreResponseFromHistory(response) {
     this.model.beforeScript = response?.beforeScript || '';
@@ -205,24 +200,16 @@ export class ApiTestComponent implements OnInit, OnDestroy {
     });
   }
   changeQuery() {
-    this.model.request.uri = transferUrlAndQuery(
-      this.model.request.uri,
-      this.model.request.queryParams,
-      {
-        base: 'query',
-        replaceType: 'replace',
-      }
-    ).url;
+    this.model.request.uri = transferUrlAndQuery(this.model.request.uri, this.model.request.queryParams, {
+      base: 'query',
+      replaceType: 'replace',
+    }).url;
   }
   changeUri() {
-    this.model.request.queryParams = transferUrlAndQuery(
-      this.model.request.uri,
-      this.model.request.queryParams,
-      {
-        base: 'url',
-        replaceType: 'replace',
-      }
-    ).query;
+    this.model.request.queryParams = transferUrlAndQuery(this.model.request.uri, this.model.request.queryParams, {
+      base: 'url',
+      replaceType: 'replace',
+    }).query;
   }
   watchBasicForm() {
     this.validateForm.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((x) => {
@@ -318,7 +305,7 @@ export class ApiTestComponent implements OnInit, OnDestroy {
       action: 'ajax',
       data: this.testServer.formatRequestData(this.model.request, {
         env: this.env,
-        globals:getGlobals(),
+        globals: getGlobals(),
         beforeScript: this.model.beforeScript,
         afterScript: this.model.afterScript,
         lang: this.lang.systemLanguage === 'zh-Hans' ? 'cn' : 'en',
@@ -354,13 +341,13 @@ export class ApiTestComponent implements OnInit, OnDestroy {
     } catch (e) {}
     if (queryParams.pageID !== this.route.snapshot.queryParams.pageID) {
       //* Other tab test finish,support multiple tab test same time
-      this.modelChange.emit({
-        when: 'otherTabTested',
+      this.afterTested.emit({
         id: queryParams.pageID,
+        url:'/home/api/http/test',
         model: {
           testStartTime: 0,
           testResult: tmpHistory,
-        },
+        }
       });
     } else {
       this.model.testResult = tmpHistory;
@@ -371,7 +358,7 @@ export class ApiTestComponent implements OnInit, OnDestroy {
     }
 
     //set globals
-   setGlobals(message.globals);
+    setGlobals(message.globals);
 
     //If test sucess,addHistory
     //Only has statusCode need save report
@@ -422,7 +409,7 @@ export class ApiTestComponent implements OnInit, OnDestroy {
   }
   private initContentType() {
     if (this.model.request.requestBodyType === ApiBodyType.Raw) {
-      this.contentType =
+      this.model.contentType =
         this.apiTestUtil.getContentType(this.model.request.requestHeaders) || ContentTypeByAbridge.Text;
     }
   }
@@ -442,6 +429,7 @@ export class ApiTestComponent implements OnInit, OnDestroy {
   }
   private resetModel() {
     return {
+      contentType: ContentTypeByAbridge.JSON,
       requestTabIndex: 1,
       responseTabIndex: 0,
       request: {},
diff --git a/src/workbench/browser/src/app/pages/api/test/api-test.module.ts b/src/workbench/browser/src/app/pages/api/http/test/api-test.module.ts
similarity index 62%
rename from src/workbench/browser/src/app/pages/api/test/api-test.module.ts
rename to src/workbench/browser/src/app/pages/api/http/test/api-test.module.ts
index c597b6313..426b7a514 100644
--- a/src/workbench/browser/src/app/pages/api/test/api-test.module.ts
+++ b/src/workbench/browser/src/app/pages/api/http/test/api-test.module.ts
@@ -1,11 +1,11 @@
-import { NgModule } from '@angular/core';
+import { LOCALE_ID, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import { Ng1Module } from '../../../ng1/ng1.module';
-import { EouiModule } from '../../../eoui/eoui.module';
-import { SharedModule } from '../../../shared/shared.module';
-import { ParamsImportModule } from '../../../shared/components/params-import/params-import.module';
+import { Ng1Module } from '../../../../ng1/ng1.module';
+import { EouiModule } from '../../../../eoui/eoui.module';
+import { SharedModule } from '../../../../shared/shared.module';
+import { ParamsImportModule } from '../../../../shared/components/params-import/params-import.module';
 
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzModalModule } from 'ng-zorro-antd/modal';
@@ -26,23 +26,25 @@ import { NzAlertModule } from 'ng-zorro-antd/alert';
 
 import { ByteToStringPipe } from './result-response/get-size.pipe';
 
-import { TestServerService } from '../../../shared/services/api-test/test-server.service';
+import { TestServerService } from '../../../../shared/services/api-test/test-server.service';
+import { ElectronService } from 'eo/workbench/browser/src/app/core/services';
+import { TestServerLocalNodeService } from 'eo/workbench/browser/src/app/shared/services/api-test/local-node/test-connect.service';
+import { TestServerServerlessService } from 'eo/workbench/browser/src/app/shared/services/api-test/serverless-node/test-connect.service';
+
 import { ApiTestUtilService } from './api-test-util.service';
 import { ApiTestService } from './api-test.service';
-import { TestServerLocalNodeService } from '../../../shared/services/api-test/local-node/test-connect.service';
-import { TestServerServerlessService } from '../../../shared/services/api-test/serverless-node/test-connect.service';
 
 import { ApiTestComponent } from './api-test.component';
-import { ApiTestHeaderComponent } from './header/api-test-header.component';
 import { ApiTestBodyComponent } from './body/api-test-body.component';
-import { ApiTestQueryComponent } from './query/api-test-query.component';
 import { ApiTestRestComponent } from './rest/api-test-rest.component';
-import { ApiTestResultHeaderComponent } from './result-header/api-test-result-header.component';
+// import { ApiTestResultHeaderComponent } from './result-header/api-test-result-header.component';
 import { ApiTestResultResponseComponent } from './result-response/api-test-result-response.component';
 import { ApiTestResultRequestBodyComponent } from './result-request-body/api-test-result-request-body.component';
 import { TestServerRemoteService } from 'eo/workbench/browser/src/app/shared/services/api-test/remote-node/test-connect.service';
 import { NzUploadModule } from 'ng-zorro-antd/upload';
-import { RouterModule, Routes } from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { ApiSharedModule } from 'eo/workbench/browser/src/app/pages/api/api-shared.module';
+
 const NZ_COMPONETS = [
   NzDropDownModule,
   NzModalModule,
@@ -61,14 +63,13 @@ const NZ_COMPONETS = [
   NzAlertModule,
   NzTypographyModule,
   NzUploadModule,
+  ApiSharedModule,
 ];
 const COMPONENTS = [
   ApiTestComponent,
-  ApiTestHeaderComponent,
   ApiTestBodyComponent,
-  ApiTestQueryComponent,
   ApiTestRestComponent,
-  ApiTestResultHeaderComponent,
+  // ApiTestResultHeaderComponent,
   ApiTestResultResponseComponent,
   ApiTestResultRequestBodyComponent,
 ];
@@ -93,10 +94,20 @@ const COMPONENTS = [
   providers: [
     ApiTestUtilService,
     ApiTestService,
-    TestServerService,
-    TestServerLocalNodeService,
-    TestServerServerlessService,
-    TestServerRemoteService,
+    {
+      provide: TestServerService,
+      useFactory: (electron: ElectronService, locale) => {
+        const isVercel = window.location.href.includes('vercel') || window.location.host.includes('eoapi.io');
+        if (electron.isElectron) {
+          return new TestServerLocalNodeService(electron, locale);
+        } else if (!isVercel) {
+          return new TestServerRemoteService(locale);
+        } else {
+          return new TestServerServerlessService(locale);
+        }
+      },
+      deps: [ElectronService, LOCALE_ID],
+    },
   ],
 })
 export class ApiTestModule {}
diff --git a/src/workbench/browser/src/app/pages/api/test/api-test.service.ts b/src/workbench/browser/src/app/pages/api/http/test/api-test.service.ts
similarity index 93%
rename from src/workbench/browser/src/app/pages/api/test/api-test.service.ts
rename to src/workbench/browser/src/app/pages/api/http/test/api-test.service.ts
index dbac42bd8..61f1060a3 100644
--- a/src/workbench/browser/src/app/pages/api/test/api-test.service.ts
+++ b/src/workbench/browser/src/app/pages/api/http/test/api-test.service.ts
@@ -10,7 +10,7 @@ import {
   StorageRes,
   StorageResStatus,
 } from 'eo/workbench/browser/src/app/shared/services/storage/index.model';
-import { ApiTestHistory } from '../../../shared/services/storage/index.model';
+import { ApiTestHistory } from '../../../../shared/services/storage/index.model';
 import { ApiTestUtilService } from './api-test-util.service';
 @Injectable()
 export class ApiTestService {
@@ -48,7 +48,7 @@ export class ApiTestService {
           ],
         }
       );
-    }  else {
+    } else {
       const apiData = await this.apiService.get(id);
       result = this.apiTestUtils.getTestDataFromApi(apiData);
     }
@@ -65,7 +65,7 @@ export class ApiTestService {
       });
     });
   }
-  addHistory(history: ApiTestHistoryFrame, apiID): Promise<any> {
+  addHistory(history: ApiTestHistoryFrame | any, apiID): Promise<any> {
     return new Promise((resolve) => {
       this.storage.run(
         'apiTestHistoryCreate',
@@ -86,6 +86,4 @@ export class ApiTestService {
       );
     });
   }
-
-
 }
diff --git a/src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.html b/src/workbench/browser/src/app/pages/api/http/test/body/api-test-body.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.html
rename to src/workbench/browser/src/app/pages/api/http/test/body/api-test-body.component.html
diff --git a/src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.scss b/src/workbench/browser/src/app/pages/api/http/test/body/api-test-body.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.scss
rename to src/workbench/browser/src/app/pages/api/http/test/body/api-test-body.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.ts b/src/workbench/browser/src/app/pages/api/http/test/body/api-test-body.component.ts
similarity index 98%
rename from src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.ts
rename to src/workbench/browser/src/app/pages/api/http/test/body/api-test-body.component.ts
index a39b65e7a..92f088580 100644
--- a/src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/test/body/api-test-body.component.ts
@@ -20,7 +20,7 @@ import {
   ApiTestBody,
   ApiTestBodyType,
   ContentTypeByAbridge,
-} from '../../../../shared/services/api-test/api-test.model';
+} from '../../../../../shared/services/api-test/api-test.model';
 import { ApiTestUtilService } from '../api-test-util.service';
 import { EoMessageService } from 'eo/workbench/browser/src/app/eoui/message/eo-message.service';
 import { transferFileToDataUrl } from 'eo/workbench/browser/src/app/utils';
@@ -218,7 +218,7 @@ export class ApiTestBodyComponent implements OnInit, OnChanges, AfterViewInit, O
         this.modelChange.emit(this.model);
       },
       importFile: (inputArg) => {
-        console.log('importFile',inputArg);
+        console.log('importFile', inputArg);
         if (inputArg.file.length === 0) {
           return;
         }
diff --git a/src/workbench/browser/src/app/pages/api/test/header/api-test-header.component.html b/src/workbench/browser/src/app/pages/api/http/test/header/api-test-header.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/header/api-test-header.component.html
rename to src/workbench/browser/src/app/pages/api/http/test/header/api-test-header.component.html
diff --git a/src/workbench/browser/src/app/pages/api/http/test/header/api-test-header.component.scss b/src/workbench/browser/src/app/pages/api/http/test/header/api-test-header.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/workbench/browser/src/app/pages/api/test/header/api-test-header.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/test/header/api-test-header.component.spec.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/header/api-test-header.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/test/header/api-test-header.component.spec.ts
diff --git a/src/workbench/browser/src/app/pages/api/test/header/api-test-header.component.ts b/src/workbench/browser/src/app/pages/api/http/test/header/api-test-header.component.ts
similarity index 93%
rename from src/workbench/browser/src/app/pages/api/test/header/api-test-header.component.ts
rename to src/workbench/browser/src/app/pages/api/http/test/header/api-test-header.component.ts
index deca23955..97133f44a 100644
--- a/src/workbench/browser/src/app/pages/api/test/header/api-test-header.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/test/header/api-test-header.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angu
 import { Subject, takeUntil } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
-import { ApiTestHeaders } from '../../../../shared/services/api-test/api-test.model';
+import { ApiTestHeaders } from '../../../../../shared/services/api-test/api-test.model';
 import { ApiTestUtilService } from '../api-test-util.service';
 @Component({
   selector: 'eo-api-test-header',
@@ -11,7 +11,7 @@ import { ApiTestUtilService } from '../api-test-util.service';
   styleUrls: ['./api-test-header.component.scss'],
 })
 export class ApiTestHeaderComponent implements OnInit, OnChanges {
-  @Input() model: object[];
+  @Input() model: ApiTestHeaders[];
   @Output() modelChange: EventEmitter<any> = new EventEmitter();
 
   listConf: object = {};
diff --git a/src/workbench/browser/src/app/pages/api/test/query/api-test-query.component.html b/src/workbench/browser/src/app/pages/api/http/test/query/api-test-query.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/query/api-test-query.component.html
rename to src/workbench/browser/src/app/pages/api/http/test/query/api-test-query.component.html
diff --git a/src/workbench/browser/src/app/pages/api/http/test/query/api-test-query.component.scss b/src/workbench/browser/src/app/pages/api/http/test/query/api-test-query.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/workbench/browser/src/app/pages/api/test/query/api-test-query.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/test/query/api-test-query.component.spec.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/query/api-test-query.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/test/query/api-test-query.component.spec.ts
diff --git a/src/workbench/browser/src/app/pages/api/test/query/api-test-query.component.ts b/src/workbench/browser/src/app/pages/api/http/test/query/api-test-query.component.ts
similarity index 93%
rename from src/workbench/browser/src/app/pages/api/test/query/api-test-query.component.ts
rename to src/workbench/browser/src/app/pages/api/http/test/query/api-test-query.component.ts
index 683db1b39..445f94b52 100644
--- a/src/workbench/browser/src/app/pages/api/test/query/api-test-query.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/test/query/api-test-query.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit, Input, OnChanges, Output, EventEmitter, OnDestroy }
 import { Subject, takeUntil } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
-import { ApiTestQuery } from '../../../../shared/services/api-test/api-test.model';
+import { ApiTestQuery } from '../../../../../shared/services/api-test/api-test.model';
 import { ApiTestUtilService } from '../api-test-util.service';
 
 @Component({
@@ -12,7 +12,7 @@ import { ApiTestUtilService } from '../api-test-util.service';
   styleUrls: ['./api-test-query.component.scss'],
 })
 export class ApiTestQueryComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() model: object[];
+  @Input() model: ApiTestQuery[];
   @Output() modelChange: EventEmitter<any> = new EventEmitter();
 
   listConf: object = {};
diff --git a/src/workbench/browser/src/app/pages/api/test/rest/api-test-rest.component.html b/src/workbench/browser/src/app/pages/api/http/test/rest/api-test-rest.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/rest/api-test-rest.component.html
rename to src/workbench/browser/src/app/pages/api/http/test/rest/api-test-rest.component.html
diff --git a/src/workbench/browser/src/app/pages/api/http/test/rest/api-test-rest.component.scss b/src/workbench/browser/src/app/pages/api/http/test/rest/api-test-rest.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/workbench/browser/src/app/pages/api/test/rest/api-test-rest.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/test/rest/api-test-rest.component.spec.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/rest/api-test-rest.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/test/rest/api-test-rest.component.spec.ts
diff --git a/src/workbench/browser/src/app/pages/api/test/rest/api-test-rest.component.ts b/src/workbench/browser/src/app/pages/api/http/test/rest/api-test-rest.component.ts
similarity index 95%
rename from src/workbench/browser/src/app/pages/api/test/rest/api-test-rest.component.ts
rename to src/workbench/browser/src/app/pages/api/http/test/rest/api-test-rest.component.ts
index 784d981df..4d450dd3e 100644
--- a/src/workbench/browser/src/app/pages/api/test/rest/api-test-rest.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/test/rest/api-test-rest.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit, Input, OnChanges, Output, EventEmitter } from '@angu
 import { Subject, takeUntil } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
-import { ApiTestRest } from '../../../../shared/services/api-test/api-test.model';
+import { ApiTestRest } from '../../../../../shared/services/api-test/api-test.model';
 import { ApiTestUtilService } from '../api-test-util.service';
 @Component({
   selector: 'eo-api-test-rest',
diff --git a/src/workbench/browser/src/app/pages/api/test/result-header/api-test-result-header.component.html b/src/workbench/browser/src/app/pages/api/http/test/result-header/api-test-result-header.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/result-header/api-test-result-header.component.html
rename to src/workbench/browser/src/app/pages/api/http/test/result-header/api-test-result-header.component.html
diff --git a/src/workbench/browser/src/app/pages/api/test/result-header/api-test-result-header.component.scss b/src/workbench/browser/src/app/pages/api/http/test/result-header/api-test-result-header.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/result-header/api-test-result-header.component.scss
rename to src/workbench/browser/src/app/pages/api/http/test/result-header/api-test-result-header.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/test/result-header/api-test-result-header.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/test/result-header/api-test-result-header.component.spec.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/result-header/api-test-result-header.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/test/result-header/api-test-result-header.component.spec.ts
diff --git a/src/workbench/browser/src/app/pages/api/test/result-header/api-test-result-header.component.ts b/src/workbench/browser/src/app/pages/api/http/test/result-header/api-test-result-header.component.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/result-header/api-test-result-header.component.ts
rename to src/workbench/browser/src/app/pages/api/http/test/result-header/api-test-result-header.component.ts
diff --git a/src/workbench/browser/src/app/pages/api/test/result-request-body/api-test-result-request-body.component.html b/src/workbench/browser/src/app/pages/api/http/test/result-request-body/api-test-result-request-body.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/result-request-body/api-test-result-request-body.component.html
rename to src/workbench/browser/src/app/pages/api/http/test/result-request-body/api-test-result-request-body.component.html
diff --git a/src/workbench/browser/src/app/pages/api/test/result-request-body/api-test-result-request-body.component.scss b/src/workbench/browser/src/app/pages/api/http/test/result-request-body/api-test-result-request-body.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/result-request-body/api-test-result-request-body.component.scss
rename to src/workbench/browser/src/app/pages/api/http/test/result-request-body/api-test-result-request-body.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/test/result-request-body/api-test-result-request-body.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/test/result-request-body/api-test-result-request-body.component.spec.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/result-request-body/api-test-result-request-body.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/test/result-request-body/api-test-result-request-body.component.spec.ts
diff --git a/src/workbench/browser/src/app/pages/api/test/result-request-body/api-test-result-request-body.component.ts b/src/workbench/browser/src/app/pages/api/http/test/result-request-body/api-test-result-request-body.component.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/result-request-body/api-test-result-request-body.component.ts
rename to src/workbench/browser/src/app/pages/api/http/test/result-request-body/api-test-result-request-body.component.ts
diff --git a/src/workbench/browser/src/app/pages/api/test/result-response/api-test-result-response.component.html b/src/workbench/browser/src/app/pages/api/http/test/result-response/api-test-result-response.component.html
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/result-response/api-test-result-response.component.html
rename to src/workbench/browser/src/app/pages/api/http/test/result-response/api-test-result-response.component.html
diff --git a/src/workbench/browser/src/app/pages/api/test/result-response/api-test-result-response.component.scss b/src/workbench/browser/src/app/pages/api/http/test/result-response/api-test-result-response.component.scss
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/result-response/api-test-result-response.component.scss
rename to src/workbench/browser/src/app/pages/api/http/test/result-response/api-test-result-response.component.scss
diff --git a/src/workbench/browser/src/app/pages/api/test/result-response/api-test-result-response.component.spec.ts b/src/workbench/browser/src/app/pages/api/http/test/result-response/api-test-result-response.component.spec.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/result-response/api-test-result-response.component.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/test/result-response/api-test-result-response.component.spec.ts
diff --git a/src/workbench/browser/src/app/pages/api/test/result-response/api-test-result-response.component.ts b/src/workbench/browser/src/app/pages/api/http/test/result-response/api-test-result-response.component.ts
similarity index 96%
rename from src/workbench/browser/src/app/pages/api/test/result-response/api-test-result-response.component.ts
rename to src/workbench/browser/src/app/pages/api/http/test/result-response/api-test-result-response.component.ts
index bcb617302..b39d126fc 100644
--- a/src/workbench/browser/src/app/pages/api/test/result-response/api-test-result-response.component.ts
+++ b/src/workbench/browser/src/app/pages/api/http/test/result-response/api-test-result-response.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit, OnChanges, ViewChild } from '@angular/core';
 import { getBlobUrl } from 'eo/workbench/browser/src/app/utils';
-import { ApiTestHistoryResponse } from '../../../../shared/services/storage/index.model';
+import { ApiTestHistoryResponse } from '../../../../../shared/services/storage/index.model';
 import { ApiTestUtilService } from '../api-test-util.service';
 import { EoMonacoEditorComponent } from 'eo/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component';
 import { DomSanitizer } from '@angular/platform-browser';
diff --git a/src/workbench/browser/src/app/pages/api/test/result-response/get-size.pipe.spec.ts b/src/workbench/browser/src/app/pages/api/http/test/result-response/get-size.pipe.spec.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/result-response/get-size.pipe.spec.ts
rename to src/workbench/browser/src/app/pages/api/http/test/result-response/get-size.pipe.spec.ts
diff --git a/src/workbench/browser/src/app/pages/api/test/result-response/get-size.pipe.ts b/src/workbench/browser/src/app/pages/api/http/test/result-response/get-size.pipe.ts
similarity index 100%
rename from src/workbench/browser/src/app/pages/api/test/result-response/get-size.pipe.ts
rename to src/workbench/browser/src/app/pages/api/http/test/result-response/get-size.pipe.ts
diff --git a/src/workbench/browser/src/app/pages/api/tab/api-tab-operate.service.ts b/src/workbench/browser/src/app/pages/api/tab/api-tab-operate.service.ts
index 134856d4b..a8ad678d5 100644
--- a/src/workbench/browser/src/app/pages/api/tab/api-tab-operate.service.ts
+++ b/src/workbench/browser/src/app/pages/api/tab/api-tab-operate.service.ts
@@ -5,7 +5,6 @@ import { TabItem, TabOperate } from 'eo/workbench/browser/src/app/pages/api/tab/
 import { MessageService } from 'eo/workbench/browser/src/app/shared/services/message';
 import { EoMessageService } from 'eo/workbench/browser/src/app/eoui/message/eo-message.service';
 import { ModalService } from 'eo/workbench/browser/src/app/shared/services/modal.service';
-import { debug } from 'console';
 import { eoDeepCopy } from 'eo/workbench/browser/src/app/utils';
 /**
  * Api tab service operate tabs array add/replace/close...
@@ -17,6 +16,7 @@ export class ApiTabOperateService {
    * Current selected tab index.
    */
   selectedIndex = 0;
+  beforeLeave = true;
   /**
    * Tab basic info
    */
@@ -34,32 +34,46 @@ export class ApiTabOperateService {
     this.BASIC_TABS = BASIC_TABS;
     this.tabStorage.init();
     const tabCache = this.tabStorage.getPersistenceStorage();
-    if (tabCache && tabCache.tabOrder?.length) {
-      this.tabStorage.tabOrder = tabCache.tabOrder.filter((uuid) => tabCache.tabsByID.hasOwnProperty(uuid));
-      //init tabsByID
-      const tabsByID = new Map();
-      Object.values(tabCache.tabsByID).forEach((tabItem) => {
-        tabsByID.set(tabItem.uuid, tabItem);
+    //No cache
+    if (!tabCache || !tabCache.tabOrder?.length) {
+      this.operateTabAfterRouteChange({
+        url: this.router.url,
       });
-      this.tabStorage.tabsByID = tabsByID;
-      const targetTab = this.getTabByIndex(tabCache.selectedIndex || 0);
-      //init selectIndex
-      this.selectedIndex = tabCache.selectedIndex;
-      //jump to exist tab
-      this.navigateTabRoute(targetTab);
-    } else {
+      return;
+    }
+    //Restore from cache
+    this.tabStorage.tabOrder = tabCache.tabOrder.filter((uuid) => tabCache.tabsByID.hasOwnProperty(uuid));
+    const tabsByID = new Map();
+    Object.values(tabCache.tabsByID).forEach((tabItem) => {
+      tabsByID.set(tabItem.uuid, tabItem);
+    });
+    this.tabStorage.tabsByID = tabsByID;
+
+    //Tab from url
+    try {
+      //If current url did't match exist tab,throw error
+      this.generateTabFromUrl(this.router.url);
       this.operateTabAfterRouteChange({
         url: this.router.url,
       });
+      return;
+    } catch (e) {
+      console.error(e);
     }
+
+    //Tab from last choose
+    const targetTab = this.getTabByIndex(tabCache.selectedIndex || 0);
+    this.selectedIndex = tabCache.selectedIndex;
+    this.navigateTabRoute(targetTab);
   }
   /**
    * Add Default tab
    *
    * @returns tabItem
    */
-  newDefaultTab() {
-    const tabItem = Object.assign({}, eoDeepCopy(this.BASIC_TABS[0]));
+  newDefaultTab(key = 'http-test') {
+    const pathHash = ['http-test', 'http-edit', 'http-detail', 'overview', 'ws-test', 'http-mock'];
+    const tabItem = Object.assign({}, eoDeepCopy(this.BASIC_TABS[pathHash.findIndex((it) => it === key)]));
     tabItem.params = {};
     tabItem.uuid = tabItem.params.pageID = Date.now();
     Object.assign(tabItem, { isLoading: false });
@@ -165,6 +179,9 @@ export class ApiTabOperateService {
    */
   generateTabFromUrl(url): TabItem {
     const result = this.getBasicInfoFromUrl(url);
+    if (!result) {
+      throw new Error(`EO_ERROR: Please check this router has added in BASIC_TABS,current route:${url}`);
+    }
     const basicTab = eoDeepCopy(this.BASIC_TABS.find((val) => result.pathname === val.pathname));
     if (!basicTab) {
       throw new Error(`EO_ERROR: Please check this router has added in BASIC_TABS,current route:${url}`);
diff --git a/src/workbench/browser/src/app/pages/api/tab/api-tab-storage.service.ts b/src/workbench/browser/src/app/pages/api/tab/api-tab-storage.service.ts
index 0477ed498..a3fb81466 100644
--- a/src/workbench/browser/src/app/pages/api/tab/api-tab-storage.service.ts
+++ b/src/workbench/browser/src/app/pages/api/tab/api-tab-storage.service.ts
@@ -56,7 +56,7 @@ export class ApiTabStorageService {
     // if (this.dataSource.dataSourceType === 'http') {return;}
     let tabsByID = Object.fromEntries(this.tabsByID);
     Object.values(tabsByID).forEach((val) => {
-      if (!val.hasChanged) {
+      if (val.type==='preview') {
         ['baseContent', 'content'].forEach((keyName) => {
           val[keyName] = null;
         });
diff --git a/src/workbench/browser/src/app/pages/api/tab/api-tab.component.html b/src/workbench/browser/src/app/pages/api/tab/api-tab.component.html
index 94b09dc04..93c26ae08 100644
--- a/src/workbench/browser/src/app/pages/api/tab/api-tab.component.html
+++ b/src/workbench/browser/src/app/pages/api/tab/api-tab.component.html
@@ -3,7 +3,7 @@
   [(nzSelectedIndex)]="tabOperate.selectedIndex"
   nzType="editable-card"
   [nzHideAdd]="true"
-  (nzSelectChange)="selectChange()"
+  (nzSelectChange)="selectChange($event)"
   [nzTabBarExtraContent]="extraTemplate"
 >
   <nz-tab *ngFor="let uuid of tabStorage.tabOrder; let i = index" [nzTitle]="titleTemplate">
@@ -29,7 +29,7 @@
           {{ tabStorage.tabsByID.get(uuid).title }}</span
         >
         <!-- Close/HasEdit -->
-        <div class="tab-item-button-group flex items-center">
+        <div class="flex items-center tab-item-button-group">
           <span class="tab-has-edit-icon eo-tab-theme-icon" *ngIf="tabStorage.tabsByID.get(uuid).hasChanged"></span>
           <button
             aria-label="Close tab"
@@ -44,9 +44,20 @@
   </nz-tab>
 </nz-tabset>
 <ng-template #extraTemplate>
-  <button  (click)="newTab()" class="ant-tabs-nav-add {{ tabStorage.tabOrder.length >= MAX_TAB_LIMIT ? 'hidden' : '' }}">
+  <button
+    (click)="newTab()"
+    nz-dropdown
+    [nzDropdownMenu]="addMenu"
+    class="ant-tabs-nav-add {{ tabStorage.tabOrder.length >= MAX_TAB_LIMIT ? 'hidden' : '' }}"
+  >
     <eo-iconpark-icon name="plus" size="16px"></eo-iconpark-icon>
   </button>
+  <nz-dropdown-menu #addMenu="nzDropdownMenu">
+    <ul nz-menu nzSelectable>
+      <li nz-menu-item (click)="newTab()">HTTP</li>
+      <li nz-menu-item (click)="newTab('ws-test')">Websocket</li>
+    </ul>
+  </nz-dropdown-menu>
   <a nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu">
     <button class="ant-tabs-nav-more"><eo-iconpark-icon class="mr5" name="more" size="16px"></eo-iconpark-icon></button>
   </a>
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
index cb8f00d6b..c2c22df5a 100644
--- 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
@@ -17,7 +17,6 @@ export class ApiTabComponent implements OnInit, OnDestroy {
   @Output() beforeClose = new EventEmitter<boolean>();
   MAX_TAB_LIMIT = 15;
   routerSubscribe: Subscription;
-  // private destroy$: Subject<void> = new Subject<void>();
   constructor(
     public tabStorage: ApiTabStorageService,
     public tabOperate: ApiTabOperateService,
@@ -30,11 +29,11 @@ export class ApiTabComponent implements OnInit, OnDestroy {
     this.watchRouterChange();
     this.watchPageLeave();
   }
-  newTab() {
+  newTab(key = undefined) {
     if (this.tabStorage.tabOrder.length >= this.MAX_TAB_LIMIT) {
       return;
     }
-    this.tabOperate.newDefaultTab();
+    this.tabOperate.newDefaultTab(key);
   }
   sortTab(_left: KeyValue<number, any>, _right: KeyValue<number, any>): number {
     const leftIndex = this.tabStorage.tabOrder.findIndex((uuid) => uuid === _left.key);
@@ -44,7 +43,8 @@ export class ApiTabComponent implements OnInit, OnDestroy {
   /**
    * Select tab
    */
-  selectChange() {
+  async selectChange(data) {
+    console.log(data.tab);
     this.tabOperate.navigateTabRoute(this.getCurrentTab());
   }
   closeTab({ $event, index, tab }: { $event: Event; index: number; tab: any }) {
@@ -86,7 +86,7 @@ export class ApiTabComponent implements OnInit, OnDestroy {
   }
   //Quick see tabs change in templete,for debug,can be deleted
   //! just for debug
-  private getConsoleTabs() {
+  getConsoleTabs() {
     const tabs = [];
     this.tabStorage.tabOrder.forEach((uuid) => {
       const tab = this.tabStorage.tabsByID.get(uuid);
@@ -178,7 +178,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
new file mode 100644
index 000000000..b68b8e169
--- /dev/null
+++ b/src/workbench/browser/src/app/pages/api/websocket/websocket.component.html
@@ -0,0 +1,186 @@
+<div class="h-full">
+  <header class="p-[10px]">
+    <form nz-form [formGroup]="validateForm" class="flex">
+      <div>
+        <nz-select
+          class="!w-[106px]"
+          [disabled]="isConnect"
+          [(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"
+            [disabled]="isConnect"
+            [(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="isConnect === false" nz-button nzType="primary" (click)="handleConnect(null)">
+          Connect
+        </button>
+        <button class="mx-1 w-28" *ngIf="isConnect === null" disabled nz-button nzType="default">Connecting</button>
+        <button
+          class="mx-1 w-28"
+          *ngIf="isConnect === true"
+          nz-button
+          nzDanger
+          nzType="default"
+          (click)="handleConnect(false)"
+        >
+          Disconnect
+        </button>
+      </div>
+    </form>
+  </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"
+        [(nzSelectedIndex)]="model.requestTabIndex"
+        class="h-full"
+      >
+        <!-- Request Headers -->
+        <nz-tab [nzTitle]="headerTitleTmp" [nzForceRender]="true">
+          <ng-template #headerTitleTmp>
+            <span
+              i18n="@@RequestHeaders"
+              nz-tooltip
+              [nzTooltipTitle]="isConnect ? 'Editable only before connection' : ''"
+              >Headers</span
+            >
+          </ng-template>
+          <fieldset [disabled]="isConnect">
+            <eo-api-test-header
+              class="eo_theme_iblock bbd"
+              [(model)]="model.request.requestHeaders"
+              (modelChange)="emitChangeFun('requestHeaders')"
+            ></eo-api-test-header>
+          </fieldset>
+        </nz-tab>
+        <nz-tab [nzTitle]="queryTitleTmp" [nzForceRender]="true">
+          <ng-template #queryTitleTmp>
+            <span i18n nz-tooltip [nzTooltipTitle]="isConnect ? 'Editable only before connection' : ''"
+              >Query Params</span
+            >
+          </ng-template>
+          <fieldset [disabled]="isConnect">
+            <eo-api-test-query
+              class="eo_theme_iblock bbd"
+              [model]="model.request.queryParams"
+              (modelChange)="emitChangeFun('queryParams')"
+            ></eo-api-test-query>
+          </fieldset>
+        </nz-tab>
+        <nz-tab [nzTitle]="messageTmp">
+          <ng-template #messageTmp>Message</ng-template>
+          <div style="height: calc(100% - 48px)">
+            <eo-monaco-editor
+              [(code)]="model.msg"
+              [config]="editorConfig"
+              [maxLine]="20"
+              [eventList]="['type', 'format', 'copy', 'search', 'replace']"
+              (codeChange)="rawDataChange($event)"
+            >
+            </eo-monaco-editor>
+            <div class="flex justify-between p-2">
+              <nz-select [(ngModel)]="editorConfig.language">
+                <nz-option nzValue="text" nzLabel="text"></nz-option>
+                <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"
+                [disabled]="!isConnect || !model.msg"
+                (click)="handleSendMsg()"
+              >
+                Send
+              </button>
+            </div>
+          </div>
+        </nz-tab>
+      </nz-tabset>
+      <div class="h-8 top-line"></div>
+      <!-- body -->
+    </div>
+    <!-- response -->
+    <section bottom class="h-full">
+      <div class="flex items-center justify-between p-3">
+        <span class="font-bold">Messages</span>
+        <span class="px-2 py-1 font-semibold status" [ngClass]="'status_' + renderStatus(isConnect)">{{
+          renderStatus(isConnect)
+        }}</span>
+      </div>
+      <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'"
+              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'"
+              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'"
+              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'"
+              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>
+              <div class="px-2">{{ item.title || item.msg }}</div>
+            </div>
+          </div>
+
+          <eo-monaco-editor
+            *ngIf="item.isExpand"
+            [code]="item.msg"
+            [disabled]="true"
+            [config]="{
+              language: 'json',
+              readOnly: true
+            }"
+            [maxLine]="20"
+            [eventList]="['type', 'format', 'copy', 'search']"
+            (codeChange)="rawDataChange($event)"
+          >
+          </eo-monaco-editor>
+        </li>
+      </ul>
+    </section>
+  </eo-split-panel>
+</div>
diff --git a/src/workbench/browser/src/app/pages/api/websocket/websocket.component.scss b/src/workbench/browser/src/app/pages/api/websocket/websocket.component.scss
new file mode 100644
index 000000000..7cf841a3e
--- /dev/null
+++ b/src/workbench/browser/src/app/pages/api/websocket/websocket.component.scss
@@ -0,0 +1,64 @@
+:host {
+  overflow: initial;
+}
+
+.top-line {
+  border-top: 1px solid var(--BORDER);
+}
+
+.bottom-line {
+  border-bottom: 1px solid var(--BORDER);
+}
+
+.left-1 {
+  transform: translateX(-5px);
+}
+
+.status {
+  border-radius: 5px;
+  &.status_Connected {
+    color: #158565;
+    background-color: rgba(21, 133, 101, 0.2);
+    box-shadow: 0 0 10px rgba(21, 133, 101, 0.2);
+  }
+
+  &.status_Disconnect {
+    color: #640125;
+    background-color: rgba(100, 1, 37, 0.1);
+    box-shadow: 0 0 10px rgba(100, 1, 37, 0.1);
+  }
+
+  &.status_Connecting {
+    color: #158565;
+    background-color: rgba(21, 133, 101, 0.1);
+    box-shadow: 0 0 10px rgba(21, 133, 101, 0.1);
+  }
+}
+
+.send_icon {
+  background-color: rgba(166, 154, 189, 0.1);
+}
+.get_icon {
+  background-color: rgba(21, 133, 101, 0.1);
+}
+
+.start_icon {
+  color: #158565;
+  border: 1px solid #158565;
+}
+.end_icon {
+  color: #8f2e14;
+  border: 1px solid #8f2e14;
+}
+
+::ng-deep {
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+  .ant-tabs-content-holder {
+    overflow: auto;
+  }
+  .ant-tabs-content {
+    height: 100%;
+  }
+}
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
new file mode 100644
index 000000000..5b9d06e85
--- /dev/null
+++ b/src/workbench/browser/src/app/pages/api/websocket/websocket.component.ts
@@ -0,0 +1,253 @@
+import { Component, OnInit, Output, OnDestroy, Input, EventEmitter } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+import { APP_CONFIG } from 'eo/workbench/browser/src/environments/environment';
+
+import { io } from 'socket.io-client';
+import { transferUrlAndQuery } from 'eo/workbench/browser/src/app/utils/api';
+import { MessageService } from '../../../shared/services/message';
+import { ApiTestService } from '../../../pages/api/http/test/api-test.service';
+import { Subject, takeUntil } from 'rxjs';
+import { isEmptyObj } from 'eo/workbench/browser/src/app/utils';
+import { ApiTestHeaders, ApiTestQuery } from 'eo/workbench/browser/src/app/shared/services/api-test/api-test.model';
+interface testViewModel {
+  requestTabIndex: number;
+  protocol: string;
+  msg: string;
+  request: {
+    requestHeaders: ApiTestHeaders[];
+    uri: string;
+    protocol: 'ws' | 'wss' | string;
+    queryParams: ApiTestQuery[];
+  };
+  response: {
+    requestHeaders: ApiTestHeaders[];
+    responseHeaders: ApiTestHeaders[];
+    responseBody: any;
+  };
+}
+@Component({
+  selector: 'websocket-content',
+  templateUrl: './websocket.component.html',
+  styleUrls: ['./websocket.component.scss'],
+})
+export class WebsocketComponent implements OnInit, OnDestroy {
+  @Input() bodyType = 'json';
+  @Output() modelChange = new EventEmitter<testViewModel>();
+  @Output() eoOnInit = new EventEmitter<testViewModel>();
+  isConnect = false;
+  socket = null;
+  model: testViewModel;
+  WS_PROTOCOL = [
+    { value: 'ws', key: 'WS' },
+    { value: 'wss', key: 'WSS' },
+  ];
+  editorConfig = {
+    language: 'json',
+  };
+  validateForm!: FormGroup;
+  private destroy$: Subject<void> = new Subject<void>();
+  constructor(
+    public route: ActivatedRoute,
+    private fb: FormBuilder,
+    private testService: ApiTestService,
+    private message: MessageService
+  ) {
+    this.initBasicForm();
+  }
+  async init() {
+    if (!this.model || isEmptyObj(this.model)) {
+      this.model = this.resetModel();
+      const id = this.route.snapshot.queryParams.uuid;
+      if (id && id.includes('history_')) {
+        const historyData: unknown = await this.testService.getHistory(Number(id.replace('history_', '')));
+        this.model = historyData as testViewModel;
+      }
+      console.log(this.model);
+    }
+    this.watchBasicForm();
+    this.eoOnInit.emit(this.model);
+  }
+  async ngOnInit() {
+    // * 通过 SocketIO 通知后端
+    this.socket = io(APP_CONFIG.SOCKETIO_URL, { transports: ['websocket'] });
+    // receive a message from the server
+    this.socket.on('ws-client', (...args) => {});
+  }
+
+  expandMessage(index) {
+    const status = this.model.response.responseBody[index].isExpand;
+    this.model.response.responseBody[index].isExpand = status == null ? true : !status;
+  }
+  renderStatus(status) {
+    const hash = new Map().set(true, 'Connected').set(false, 'Disconnect').set(null, 'Connecting');
+    return hash.get(status);
+  }
+  rawDataChange(e) {
+    this.modelChange.emit(this.model);
+  }
+  changeQuery() {
+    this.model.request.uri = transferUrlAndQuery(this.model.request.uri, this.model.request.queryParams, {
+      base: 'query',
+      replaceType: 'replace',
+    }).url;
+  }
+  emitChangeFun(where) {
+    if (where === 'queryParams') {
+      this.changeQuery();
+    }
+    this.modelChange.emit(this.model);
+  }
+  async handleConnect(bool = false) {
+    const isOK = this.checkForm();
+    if (!isOK) {
+      return;
+    }
+    if (this.socket == null) {
+      console.log('communication is not ready');
+      return;
+    }
+    if (bool === false) {
+      // * save to test history
+      this.model.response.responseBody.unshift({
+        type: 'end',
+        msg: 'Disconnect from ' + this.model.request.uri,
+        isExpand: false,
+      });
+      const { requestTabIndex, msg, ...data } = this.model;
+      const res = await this.testService.addHistory(data, 0);
+      if (res) {
+        this.message.send({ type: 'updateHistory', data: {} });
+      }
+      this.socket.emit('ws-server', { type: 'ws-disconnect', content: {} });
+      this.socket.off('ws-client');
+      this.isConnect = false;
+      return;
+    }
+    // * connecting
+    this.isConnect = null;
+    this.unListen();
+    const wsUrl = this.model.request.uri;
+    if (wsUrl === '') {
+      console.log('Websocket URL is empty');
+      return;
+    }
+    {
+      const { requestTabIndex, msg, ...data } = this.model;
+      this.socket.emit('ws-server', { type: 'ws-connect', content: data });
+    }
+    this.listen();
+  }
+
+  handleSendMsg() {
+    // * 通过 SocketIO 通知后端
+    // send a message to the server
+    if (!this.model.msg) {
+      return;
+    }
+    this.socket.emit('ws-server', { type: 'ws-message', content: { message: this.model.msg } });
+    this.model.response.responseBody.unshift({ type: 'send', msg: this.model.msg, isExpand: false });
+    this.model.msg = '';
+  }
+  unListen() {
+    this.socket.off('ws-client');
+  }
+  listen() {
+    // * 无论是否连接成功，都清空发送历史
+    this.model.response.responseBody = [];
+    if (this.socket == null) {
+      console.log('communication is no ready');
+      return;
+    }
+    this.socket.on('ws-client', ({ type, status, content }) => {
+      if (type === 'ws-connect-back') {
+        if (status === 0) {
+          this.isConnect = true;
+          this.model.requestTabIndex = 2;
+          const { reqHeader, resHeader } = content;
+          this.model.response.responseBody.unshift({
+            type: 'start',
+            msg: JSON.stringify(
+              {
+                'Request Headers': reqHeader,
+                'Response Headers': resHeader,
+              },
+              null,
+              2
+            ),
+            title: 'Connected to ' + this.model.request.uri,
+            isExpand: false,
+          });
+        } else {
+          this.model.response.responseBody.unshift({
+            type: 'end',
+            msg: content,
+            title: 'Connected to ' + this.model.request.uri + ` is failed`,
+            isExpand: false,
+          });
+          this.isConnect = false;
+        }
+      }
+      if (type === 'ws-message-back' && status === 0) {
+        this.model.response.responseBody.unshift({ type: 'get', msg: content, isExpand: false });
+      }
+    });
+  }
+  isFormChange() {
+    return false;
+  }
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+  private resetModel() {
+    return {
+      requestTabIndex: 2,
+      protocol: 'websocket',
+      msg: '',
+      request: {
+        requestHeaders: [],
+        uri: '',
+        protocol: 'ws',
+        queryParams: [],
+      },
+      response: {
+        requestHeaders: [],
+        responseHeaders: [],
+        responseBody: [],
+      },
+    };
+  }
+  private checkForm(): boolean {
+    for (const i in this.validateForm.controls) {
+      if (this.validateForm.controls.hasOwnProperty(i)) {
+        this.validateForm.controls[i].markAsDirty();
+        this.validateForm.controls[i].updateValueAndValidity();
+      }
+    }
+    if (this.validateForm.status === 'INVALID') {
+      return false;
+    }
+    return true;
+  }
+  private watchBasicForm() {
+    this.validateForm.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((x) => {
+      // Settimeout for next loop, when triggle valueChanges, apiData actually isn't the newest data
+      setTimeout(() => {
+        this.modelChange.emit(this.model);
+      }, 0);
+    });
+  }
+  private initBasicForm() {
+    //Prevent init error
+    if (!this.model) {
+      this.model = this.resetModel();
+    }
+    const controls = {};
+    ['uri', 'protocol'].forEach((name) => {
+      controls[name] = [this.model.request[name], [Validators.required]];
+    });
+    this.validateForm = this.fb.group(controls);
+  }
+}
diff --git a/src/workbench/browser/src/app/pages/api/websocket/websocket.module.ts b/src/workbench/browser/src/app/pages/api/websocket/websocket.module.ts
new file mode 100644
index 000000000..191642eb1
--- /dev/null
+++ b/src/workbench/browser/src/app/pages/api/websocket/websocket.module.ts
@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzTabsModule } from 'ng-zorro-antd/tabs';
+
+import { Ng1Module } from '../../../ng1/ng1.module';
+import { ApiEditUtilService } from '../http/edit/api-edit-util.service';
+
+import { WebsocketComponent } from './websocket.component';
+import { WebsocketRoutingModule } from './websocket.routing.module';
+import { SharedModule } from 'eo/workbench/browser/src/app/shared/shared.module';
+import { ApiSharedModule } from 'eo/workbench/browser/src/app/pages/api/api-shared.module';
+
+const ANTDS = [NzButtonModule, NzInputModule, NzSelectModule, NzTabsModule];
+
+@NgModule({
+  imports: [
+    WebsocketRoutingModule,
+    ApiSharedModule,
+    // FormsModule,
+    Ng1Module,
+    // ReactiveFormsModule,
+    CommonModule,
+    SharedModule,
+    ...ANTDS,
+  ],
+  declarations: [WebsocketComponent],
+  exports: [WebsocketComponent],
+  providers: [ApiEditUtilService],
+})
+export class WebsocketModule {}
diff --git a/src/workbench/browser/src/app/pages/api/websocket/websocket.routing.module.ts b/src/workbench/browser/src/app/pages/api/websocket/websocket.routing.module.ts
new file mode 100644
index 000000000..d4cffe3b9
--- /dev/null
+++ b/src/workbench/browser/src/app/pages/api/websocket/websocket.routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { WebsocketComponent } from './websocket.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: WebsocketComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class WebsocketRoutingModule {}
diff --git a/src/workbench/browser/src/app/pages/pages.component.html b/src/workbench/browser/src/app/pages/pages.component.html
index 19d90f334..547470c52 100644
--- a/src/workbench/browser/src/app/pages/pages.component.html
+++ b/src/workbench/browser/src/app/pages/pages.component.html
@@ -1,8 +1,11 @@
 <eo-navbar></eo-navbar>
-<div class="page-body" [ngClass]="{'web-page-body':!electron.isElectron,'pc-page-body':electron.isElectron}"
-  [style.--remote-notification-height]="isShowNotification && electron.isElectron ? '50px' : '0px'">
+<div
+  class="page-body"
+  [ngClass]="{ 'web-page-body': !electron.isElectron, 'pc-page-body': electron.isElectron }"
+  [style.--remote-notification-height]="isShowNotification && electron.isElectron ? '50px' : '0px'"
+>
   <div *ngIf="!isRemote && isShowNotification && electron.isElectron" class="remote-notification">
-    <eo-iconpark-icon name="{{isRemote ? 'wifi' : 'close-wifi'}}" class="text-[13px] mr-[2px]"></eo-iconpark-icon>
+    <eo-iconpark-icon name="{{ isRemote ? 'wifi' : 'close-wifi' }}" class="text-[13px] mr-[2px]"></eo-iconpark-icon>
     <span i18n>Current data storage exists {{ dataSourceText }},please switch if you want to collaborate</span>
     <a class="eo-blod ml-0.5" (click)="switchDataSource()" i18n>Remote Server Data Storage</a>
     <eo-iconpark-icon name="close-small" class="absolute right-[20px] cursor-pointer"></eo-iconpark-icon>
@@ -12,8 +15,13 @@
     <eo-sidebar></eo-sidebar>
     <div class="home fg1">
       <router-outlet *ngIf="!loadedIframe"></router-outlet>
-      <iframe *ngIf="!this.sidebar.currentModule.isOffical" id="app_iframe" frameborder="no" border="0"
-        style="width: calc(100vw - 90px); height: calc(100vh - var(--NAVBAR_HEIGHT) - 4px)"></iframe>
+      <iframe
+        *ngIf="!this.sidebar.currentModule.isOffical"
+        id="app_iframe"
+        frameborder="no"
+        border="0"
+        style="width: calc(100vw - 90px); height: calc(100vh - var(--NAVBAR_HEIGHT) - 4px)"
+      ></iframe>
     </div>
   </div>
 </div>
diff --git a/src/workbench/browser/src/app/pages/pages.module.ts b/src/workbench/browser/src/app/pages/pages.module.ts
index 167e3e033..14a980356 100644
--- a/src/workbench/browser/src/app/pages/pages.module.ts
+++ b/src/workbench/browser/src/app/pages/pages.module.ts
@@ -8,7 +8,7 @@ import { NavbarModule } from 'eo/workbench/browser/src/app/pages/navbar/navbar.m
 import { EouiModule } from 'eo/workbench/browser/src/app/eoui/eoui.module';
 
 @NgModule({
-  imports: [PagesRoutingModule,SettingModule, EouiModule, CommonModule, SharedModule, NavbarModule],
+  imports: [PagesRoutingModule, SettingModule, EouiModule, CommonModule, SharedModule, NavbarModule],
   declarations: [PagesComponent],
   exports: [],
 })
diff --git a/src/workbench/browser/src/app/shared/components/params-import/params-import.component.html b/src/workbench/browser/src/app/shared/components/params-import/params-import.component.html
index 170dcd273..f9a0b2371 100644
--- a/src/workbench/browser/src/app/shared/components/params-import/params-import.component.html
+++ b/src/workbench/browser/src/app/shared/components/params-import/params-import.component.html
@@ -1,7 +1,7 @@
-<span class="menu" (click)="showModal('json')">
+<button class="menu" (click)="showModal('json')">
   <eo-iconpark-icon name="afferent-three" size="14px"></eo-iconpark-icon>
   <span class="fs12 ml5" i18n>Import</span>
-</span>
+</button>
 
 <!-- <span class="menu" nz-dropdown [nzDropdownMenu]="menu">
   <i class="fs24 iconfont icon-daoru"></i>
@@ -14,12 +14,20 @@
   </ul>
 </nz-dropdown-menu> -->
 
-<nz-modal [(nzVisible)]="isVisible" [nzTitle]="'导入' + (modalTitle || contentTypeTitle)" [nzStyle]="{ width: '800px' }"
-  (nzOnCancel)="handleCancel()">
+<nz-modal
+  [(nzVisible)]="isVisible"
+  [nzTitle]="'导入' + (modalTitle || contentTypeTitle)"
+  [nzStyle]="{ width: '800px' }"
+  (nzOnCancel)="handleCancel()"
+>
   <div *nzModalContent>
     <pre class="eg" i18n>Import like this:<br />{{ eg }}</pre>
-    <eo-monaco-editor [(code)]="paramCode" [editorType]="contenTypeEditor" [maxLine]="16"
-      [eventList]="['type', 'format', 'copy', 'search', 'replace']"></eo-monaco-editor>
+    <eo-monaco-editor
+      [(code)]="paramCode"
+      [editorType]="contenTypeEditor"
+      [maxLine]="16"
+      [eventList]="['type', 'format', 'copy', 'search', 'replace']"
+    ></eo-monaco-editor>
   </div>
   <div *nzModalFooter style="text-align: left">
     <button nz-button nzType="default" (click)="handleImport('mixin')" i18n>Replace Changed</button>
diff --git a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts
index 7f4c7417d..a892d5ebe 100644
--- a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts
+++ b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts
@@ -57,12 +57,12 @@ export class SidebarComponent implements OnInit, OnDestroy {
   private getModules() {
     const defaultModule = [
       {
-        moduleName: 'REST',
+        moduleName: 'API',
         moduleID: '@eo-core-apimanger',
         isOffical: true,
         icon: 'api',
         activeRoute: 'home/api',
-        route: 'home/api/test',
+        route: 'home/api/http/test',
       },
       {
         moduleName: $localize`Extensions`,
diff --git a/src/workbench/browser/src/app/shared/components/split-panel/split.panel.component.scss b/src/workbench/browser/src/app/shared/components/split-panel/split.panel.component.scss
index 7a5fc6490..52320e794 100644
--- a/src/workbench/browser/src/app/shared/components/split-panel/split.panel.component.scss
+++ b/src/workbench/browser/src/app/shared/components/split-panel/split.panel.component.scss
@@ -1,3 +1,7 @@
+:host {
+  display: block;
+  height: 100%;
+}
 .split-wrapper {
   display: flex;
   flex-direction: column;
@@ -40,7 +44,6 @@
       }
     }
 
-
     .trigger-bar-con {
       width: 100%;
       display: flex;
@@ -54,7 +57,7 @@
       border-radius: 2px;
       display: inline-block;
       margin: 0 1px;
-      background: rgba(23,35,61,.25);
+      background: rgba(23, 35, 61, 0.25);
     }
   }
 
diff --git a/src/workbench/browser/src/app/shared/services/api-test/test-server.service.ts b/src/workbench/browser/src/app/shared/services/api-test/test-server.service.ts
index 3279a4041..8cb8a75a8 100644
--- a/src/workbench/browser/src/app/shared/services/api-test/test-server.service.ts
+++ b/src/workbench/browser/src/app/shared/services/api-test/test-server.service.ts
@@ -1,27 +1,10 @@
 import { Injectable } from '@angular/core';
-import { TestServerLocalNodeService } from './local-node/test-connect.service';
-import { TestServerServerlessService } from './serverless-node/test-connect.service';
-import { ElectronService } from '../../../core/services';
-import { TestServerRemoteService } from 'eo/workbench/browser/src/app/shared/services/api-test/remote-node/test-connect.service';
+import { ApiTestRes, requestDataOpts, TestServer } from 'eo/workbench/browser/src/app/shared/services/api-test/test-server.model';
 @Injectable()
-export class TestServerService {
-  isElectron = true;
-  constructor(
-    private electron: ElectronService,
-    private remoteNode: TestServerRemoteService,
-    private localNode: TestServerLocalNodeService,
-    private serverlessNode: TestServerServerlessService
-  ) {
-    this.isElectron = this.electron.isElectron;
-  }
-  get instance() {
-    const isVercel = window.location.href.includes('vercel')||window.location.host.includes('eoapi.io');
-    if (this.isElectron) {
-      return this.localNode;
-    } else if (!isVercel) {
-      return this.remoteNode;
-    } else {
-      return this.serverlessNode;
-    }
-  }
+export class TestServerService implements TestServer {
+  init: (receiveMessage: (message: any) => void) => void;
+  send: (action: string, message: any) => void;
+  formatRequestData: (apiData, opts: requestDataOpts) => any;
+  formatResponseData: (res) => ApiTestRes;
+  close: () => void;
 }
diff --git a/src/workbench/browser/src/app/shared/services/storage/index.model.ts b/src/workbench/browser/src/app/shared/services/storage/index.model.ts
index 76c310cfe..cc25e69fd 100644
--- a/src/workbench/browser/src/app/shared/services/storage/index.model.ts
+++ b/src/workbench/browser/src/app/shared/services/storage/index.model.ts
@@ -1,4 +1,4 @@
-import { ApiTestBody, ApiTestBodyType, ApiTestHeaders } from './../api-test/api-test.model';
+import { ApiTestBody, ApiTestBodyType, ApiTestHeaders, ApiTestQuery } from './../api-test/api-test.model';
 import { Observable } from 'rxjs';
 
 /**
@@ -461,8 +461,6 @@ export interface ApiTestData {
 
   /**
    * 请求头数据，数据用json存储
-   *
-   * @type {object}
    */
   requestHeaders?: ApiTestHeaders[];
 
@@ -476,7 +474,6 @@ export interface ApiTestData {
   /**
    * 请求参数(多层结构)，数据用json存储
    *
-   * @type {object}
    */
   requestBody?: ApiTestBody[] | string;
 
@@ -485,7 +482,7 @@ export interface ApiTestData {
    *
    * @type {object[]}
    */
-  queryParams?: object[];
+  queryParams?: ApiTestQuery[];
 
   /**
    * rest请求参数，数据用json存储
diff --git a/src/workbench/browser/src/environments/environment.dev.ts b/src/workbench/browser/src/environments/environment.dev.ts
index 8ea11e492..0914db057 100644
--- a/src/workbench/browser/src/environments/environment.dev.ts
+++ b/src/workbench/browser/src/environments/environment.dev.ts
@@ -3,6 +3,7 @@ export const APP_CONFIG = Object.assign(
   {
     production: false,
     environment: 'DEV',
+    SOCKETIO_URL: 'ws://localhost:4301',
   },
   COMMON_CONFIG
 );
diff --git a/src/workbench/browser/src/environments/environment.prod.ts b/src/workbench/browser/src/environments/environment.prod.ts
index a5590f649..802d211ab 100644
--- a/src/workbench/browser/src/environments/environment.prod.ts
+++ b/src/workbench/browser/src/environments/environment.prod.ts
@@ -4,6 +4,7 @@ export const APP_CONFIG = Object.assign(
   {
     production: true,
     environment: 'PROD',
+    SOCKETIO_URL: 'ws://106.12.149.147:4301',
   },
   COMMON_CONFIG
 );
diff --git a/src/workbench/browser/src/environments/environment.web.ts b/src/workbench/browser/src/environments/environment.web.ts
index 63d898bbc..f5db6b9c9 100644
--- a/src/workbench/browser/src/environments/environment.web.ts
+++ b/src/workbench/browser/src/environments/environment.web.ts
@@ -3,6 +3,7 @@ export const APP_CONFIG = Object.assign(
   {
     production: false,
     environment: 'WEB',
+    SOCKETIO_URL: 'ws://localhost:4301',
   },
   COMMON_CONFIG
 );
diff --git a/src/workbench/browser/src/index.html b/src/workbench/browser/src/index.html
index a4633934f..ecab18487 100644
--- a/src/workbench/browser/src/index.html
+++ b/src/workbench/browser/src/index.html
@@ -7,7 +7,7 @@
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <script async
-    src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_12799_45.f89f4e0243155f9bf80e55f76674be32.js"></script>
+    src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_12799_48.a333dbb15379f97f5491d623c96b2dd1.js"></script>
   <script src="assets/libs/protocolcheck.js"></script>
   <link rel="icon" type="image/x-icon" href="assets/icons/icon.ico" />
 </head>
diff --git a/src/workbench/browser/src/styles.scss b/src/workbench/browser/src/styles.scss
index 0d0d9b5df..ea6df0628 100644
--- a/src/workbench/browser/src/styles.scss
+++ b/src/workbench/browser/src/styles.scss
@@ -35,10 +35,18 @@ img, svg, video, canvas, audio, iframe, embed, object {
 .method_text_HEAD {
   color: var(--YELLOW_TAG_BG);
 }
+.method_text_WS {
+  color: #507ea4;
+}
+.method_text_WSS {
+  color: #165e83;
+}
 .method_text_PATCH {
   color: var(--ORANGE_TAG_BG);
 }
-.method_text_PUT,
+.method_text_PUT {
+  color: #82ae46;
+}
 .method_text_OPTIONS {
   color: var(--BLACK_TAG_BG);
 }
diff --git a/src/workbench/node/server/main.js b/src/workbench/node/server/main.js
index 42b0c80b2..5f694bf12 100644
--- a/src/workbench/node/server/main.js
+++ b/src/workbench/node/server/main.js
@@ -9,6 +9,11 @@ const koaBody = require('koa-body');
 const Koa = require('koa');
 const cors = require('@koa/cors');
 
+const IO = require('socket.io');
+const WebSocket = require('ws');
+
+const io = new IO.Server(4301);
+
 const app = new Koa();
 const port = 4201;
 
@@ -24,7 +29,7 @@ app.use(async (ctx, next) => {
     case '/api/unit': {
       let reqJSON = ctx.request.body.data;
       reqJSON.env = _LibsCommon.parseEnv(reqJSON.env);
-      await new _LibsFlowCommon.core().main(reqJSON).then(({ globals,report, history }) => {
+      await new _LibsFlowCommon.core().main(reqJSON).then(({ globals, report, history }) => {
         ['general', 'requestInfo', 'resultInfo'].forEach((keyName) => {
           if (typeof history[keyName] === 'string') history[keyName] = JSON.parse(history[keyName]);
         });
@@ -34,7 +39,7 @@ app.use(async (ctx, next) => {
             id: ctx.request.body.id,
             report: report,
             history: history,
-            globals:globals
+            globals: globals,
           },
         });
       });
@@ -45,3 +50,81 @@ app.use(async (ctx, next) => {
 });
 
 app.listen(port);
+
+io.on('connection', (socket) => {
+  // send a message to the client
+  socket.emit('ws-client', 'link success');
+  let ws = null;
+
+  // receive a message from the client
+  socket.on('ws-server', ({ type, content }) => {
+    if (type === 'connect') {
+      return;
+    }
+    if (type === 'ws-disconnect') {
+      ws = null;
+      return;
+    }
+    if (type === 'ws-connect') {
+      const { request } = content;
+      // console.log(request?.requestHeaders);
+      // try {
+      //   new WebSocket(request.uri);
+      // } catch (error) {
+      //   console.log('try to get the error', error);
+      // }
+      try {
+        ws = new WebSocket(request.protocol + request.uri, {
+          headers: request?.requestHeaders
+            ?.filter((it) => it.name && it.value)
+            .reduce(
+              (total, { name, value }) => ({
+                ...total,
+                [name]: value,
+              }),
+              {}
+            ),
+        });
+      } catch (error) {
+        socket.emit('ws-client', { type: 'ws-connect-back', status: -1, content: error });
+        ws = null;
+        return;
+      }
+
+      const reqHeader = ws._req.getHeaders();
+      // console.log(ws);
+
+      // 打开WebSocket连接后立刻发送一条消息:
+      ws.on('open', () => {
+        // console.log(`[CLIENT] open()`);
+      });
+      ws.on('upgrade', (res) => {
+        const { headers: resHeader } = res;
+        socket.emit('ws-client', { type: 'ws-connect-back', status: 0, content: { reqHeader, resHeader } });
+      });
+
+      ws.on('message', (message) => {
+        socket.emit('ws-client', {
+          type: 'ws-message-back',
+          status: 0,
+          content: message,
+        });
+      });
+
+      ws.on('close', () => {
+        socket.emit('ws-client', {
+          type: 'ws-message-back',
+          status: 1,
+          content: 'Server disconnected',
+        });
+      });
+    }
+    if (type === 'ws-message') {
+      const { message } = content;
+      if (!message) {
+        console.log('发送内容为空');
+      }
+      ws.send(message);
+    }
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index fb46fd1d6..c5e843d66 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2112,6 +2112,11 @@
   resolved "https://registry.npmmirror.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
   integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==
 
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
+  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
+
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
   resolved "https://registry.npmmirror.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
@@ -4583,9 +4588,9 @@ core-util-is@~1.0.0:
   resolved "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-cors@~2.8.5:
+cors@2.8.5, cors@~2.8.5:
   version "2.8.5"
-  resolved "https://registry.npmmirror.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
+  resolved "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
   integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
   dependencies:
     object-assign "^4"
@@ -5455,6 +5460,17 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
+engine.io-client@~6.2.1:
+  version "6.2.2"
+  resolved "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.2.tgz#c6c5243167f5943dcd9c4abee1bfc634aa2cbdd0"
+  integrity sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.0.3"
+    ws "~8.2.3"
+    xmlhttprequest-ssl "~2.0.0"
+
 engine.io-parser@~5.0.3:
   version "5.0.4"
   resolved "https://registry.npmmirror.com/engine.io-parser/-/engine.io-parser-5.0.4.tgz#0b13f704fa9271b3ec4f33112410d8f3f41d0fc0"
@@ -11971,6 +11987,16 @@ socket.io-adapter@~2.4.0:
   resolved "https://registry.npmmirror.com/socket.io-adapter/-/socket.io-adapter-2.4.0.tgz#b50a4a9ecdd00c34d4c8c808224daa1a786152a6"
   integrity sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg==
 
+socket.io-client@4.5.1:
+  version "4.5.1"
+  resolved "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.1.tgz#cab8da71976a300d3090414e28c2203a47884d84"
+  integrity sha512-e6nLVgiRYatS+AHXnOnGi4ocOpubvOUCGhyWw8v+/FxW8saHkinG6Dfhi9TU0Kt/8mwJIAASxvw6eujQmjdZVA==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.2.1"
+    socket.io-parser "~4.2.0"
+
 socket.io-parser@~4.0.4:
   version "4.0.5"
   resolved "https://registry.npmmirror.com/socket.io-parser/-/socket.io-parser-4.0.5.tgz#cb404382c32324cc962f27f3a44058cf6e0552df"
@@ -11980,9 +12006,17 @@ socket.io-parser@~4.0.4:
     component-emitter "~1.3.0"
     debug "~4.3.1"
 
-socket.io@^4.4.1:
+socket.io-parser@~4.2.0:
+  version "4.2.1"
+  resolved "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz#01c96efa11ded938dcb21cbe590c26af5eff65e5"
+  integrity sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+
+socket.io@4.5.1, socket.io@^4.4.1:
   version "4.5.1"
-  resolved "https://registry.npmmirror.com/socket.io/-/socket.io-4.5.1.tgz#aa7e73f8a6ce20ee3c54b2446d321bbb6b1a9029"
+  resolved "https://registry.npmjs.org/socket.io/-/socket.io-4.5.1.tgz#aa7e73f8a6ce20ee3c54b2446d321bbb6b1a9029"
   integrity sha512-0y9pnIso5a9i+lJmsCdtmTTgJFFSvNQKDnPQRz28mGNnxbmqYg2QPtJTLFxhymFZhAIn50eHAKzJeiNaKr+yUQ==
   dependencies:
     accepts "~1.3.4"
@@ -13674,6 +13708,11 @@ write-file-atomic@^3.0.0:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
+ws@8.8.1, ws@^8.4.2:
+  version "8.8.1"
+  resolved "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0"
+  integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==
+
 ws@^5.2.0:
   version "5.2.3"
   resolved "https://registry.npmmirror.com/ws/-/ws-5.2.3.tgz#05541053414921bc29c63bee14b8b0dd50b07b3d"
@@ -13681,11 +13720,6 @@ ws@^5.2.0:
   dependencies:
     async-limiter "~1.0.0"
 
-ws@^8.4.2:
-  version "8.8.1"
-  resolved "https://registry.npmmirror.com/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0"
-  integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==
-
 ws@~8.2.3:
   version "8.2.3"
   resolved "https://registry.npmmirror.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
@@ -13724,6 +13758,11 @@ xmlbuilder@~11.0.0:
   resolved "https://registry.npmmirror.com/xmlbuilder/-/xmlbuilder-11.0.1.tgz#be9bae1c8a046e76b31127726347d0ad7002beb3"
   integrity sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==
 
+xmlhttprequest-ssl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
+  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
+
 xtend@^4.0.2, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"