feat: 添加 Stomp/WebSocket 实现

build/vite/plugin/autoImport.ts

@@ -17,6 +17,7 @@ export function configAutoImportPlugin(): Plugin {
                 '@/config/app': ['$app'],
                 '@/api/services': ['defs'],
                 '@/api/services/mods': ['API'],
+                '@/utils/stomp': [['default', 'Stomp']],
             },
         ],
     })

package.json

@@ -58,6 +58,7 @@
         "@iconify/iconify": "^2.2.1",
         "@logicflow/core": "^1.1.26",
         "@logicflow/extension": "^1.1.26",
+        "@stomp/stompjs": "^6.1.2",
         "@vue/runtime-core": "^3.2.37",
         "@vue/shared": "^3.2.37",
         "@vueuse/core": "^8.9.4",
@@ -82,7 +83,9 @@
         "qs": "^6.11.0",
         "resize-observer-polyfill": "^1.5.1",
         "showdown": "^2.1.0",
+        "sockjs-client": "^1.6.1",
         "sortablejs": "^1.15.0",
+        "stompjs": "^2.3.3",
         "tinymce": "^5.10.5",
         "vditor": "^3.8.17",
         "vue": "^3.2.37",
@@ -109,7 +112,9 @@
         "@types/qrcode": "^1.5.0",
         "@types/qs": "^6.9.7",
         "@types/showdown": "^1.9.4",
+        "@types/sockjs-client": "^1.5.1",
         "@types/sortablejs": "^1.13.0",
+        "@types/stompjs": "^2.3.5",
         "@typescript-eslint/eslint-plugin": "^5.36.0",
         "@typescript-eslint/parser": "^5.36.0",
         "@vitejs/plugin-legacy": "^2.0.1",

pnpm-lock.yaml

@@ -10,6 +10,7 @@ specifiers:
   '@logicflow/core': ^1.1.26
   '@logicflow/extension': ^1.1.26
   '@purge-icons/generated': ^0.8.1
+  '@stomp/stompjs': ^6.1.2
   '@types/codemirror': ^5.60.5
   '@types/crypto-js': ^4.1.1
   '@types/fs-extra': ^9.0.13
@@ -22,7 +23,9 @@ specifiers:
   '@types/qrcode': ^1.5.0
   '@types/qs': ^6.9.7
   '@types/showdown': ^1.9.4
+  '@types/sockjs-client': ^1.5.1
   '@types/sortablejs': ^1.13.0
+  '@types/stompjs': ^2.3.5
   '@typescript-eslint/eslint-plugin': ^5.36.0
   '@typescript-eslint/parser': ^5.36.0
   '@vitejs/plugin-legacy': ^2.0.1
@@ -80,8 +83,10 @@ specifiers:
   rollup: ^2.78.1
   rollup-plugin-visualizer: ^5.8.0
   showdown: ^2.1.0
+  sockjs-client: ^1.6.1
   sort-package-json: ^1.57.0
   sortablejs: ^1.15.0
+  stompjs: ^2.3.3
   stylelint: ^14.11.0
   stylelint-config-prettier: ^9.0.3
   stylelint-config-recommended: ^8.0.0
@@ -121,6 +126,7 @@ dependencies:
   '@iconify/iconify': 2.2.1
   '@logicflow/core': 1.1.26
   '@logicflow/extension': 1.1.26
+  '@stomp/stompjs': 6.1.2
   '@vue/runtime-core': 3.2.37
   '@vue/shared': 3.2.37
   '@vueuse/core': 8.9.4_vue@3.2.37
@@ -145,7 +151,9 @@ dependencies:
   qs: 6.11.0
   resize-observer-polyfill: 1.5.1
   showdown: 2.1.0
+  sockjs-client: 1.6.1
   sortablejs: 1.15.0
+  stompjs: 2.3.3
   tinymce: 5.10.5
   vditor: 3.8.17
   vue: 3.2.37
@@ -172,7 +180,9 @@ devDependencies:
   '@types/qrcode': 1.5.0
   '@types/qs': 6.9.7
   '@types/showdown': 1.9.4
+  '@types/sockjs-client': 1.5.1
   '@types/sortablejs': 1.13.0
+  '@types/stompjs': 2.3.5
   '@typescript-eslint/eslint-plugin': 5.36.0_3g5q5capxpyhialyvs33l4nssm
   '@typescript-eslint/parser': 5.36.0_yqf6kl63nyoq5megxukfnom5rm
   '@vitejs/plugin-legacy': 2.0.1_terser@5.15.0+vite@3.0.9
@@ -2077,6 +2087,10 @@ packages:
       nanopop: 2.1.0
     dev: false
 
+  /@stomp/stompjs/6.1.2:
+    resolution: {integrity: sha512-FHDTrIFM5Ospi4L3Xhj6v2+NzCVAeNDcBe95YjUWhWiRMrBF6uN3I7AUOlRgT6jU/2WQvvYK8ZaIxFfxFp+uHQ==}
+    dev: false
+
   /@surma/rollup-plugin-off-main-thread/2.2.3:
     resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
     dependencies:
@@ -2227,10 +2241,20 @@ packages:
     resolution: {integrity: sha512-50ehC3IAijfkvoNqmQ+VL73S7orOxmAK8ljQAFBv8o7G66lAZyxQj1L3BAv2dD86myLXI+sgKP1kcxAaxW356w==}
     dev: true
 
+  /@types/sockjs-client/1.5.1:
+    resolution: {integrity: sha512-bmZM6A1GPdjF0bcuIUC+50hZEMGkzMsiG9by6X9U+7IZFOiPtz7MJ9h05FSpPVxlj4i+TzzoG3ESo1FJlbLb6A==}
+    dev: true
+
   /@types/sortablejs/1.13.0:
     resolution: {integrity: sha512-C3064MH72iEfeGCYEGCt7FCxXoAXaMPG0QPnstcxvPmbl54erpISu06d++FY37Smja64iWy5L8wOyHHBghWbJQ==}
     dev: true
 
+  /@types/stompjs/2.3.5:
+    resolution: {integrity: sha512-0WkL8RlB1uuZt8XJEdnwdFdV5RIFcQw9UhNQfTpiJYcjqC6QQpFqc5YcIrlH+K/843EGJVIaOFANjs7u7bmTlw==}
+    dependencies:
+      '@types/node': 18.7.14
+    dev: true
+
   /@types/svgo/2.6.4:
     resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}
     dependencies:
@@ -3101,6 +3125,15 @@ packages:
       ieee754: 1.2.1
     dev: true
 
+  /bufferutil/4.0.7:
+    resolution: {integrity: sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==}
+    engines: {node: '>=6.14.2'}
+    requiresBuild: true
+    dependencies:
+      node-gyp-build: 4.5.0
+    dev: false
+    optional: true
+
   /builtin-modules/3.3.0:
     resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
     engines: {node: '>=6'}
@@ -3833,6 +3866,14 @@ packages:
       - '@swc/wasm'
     dev: true
 
+  /d/1.0.1:
+    resolution: {integrity: sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==}
+    dependencies:
+      es5-ext: 0.10.62
+      type: 1.2.0
+    dev: false
+    optional: true
+
   /dargs/7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}
@@ -3855,7 +3896,6 @@ packages:
         optional: true
     dependencies:
       ms: 2.0.0
-    dev: true
 
   /debug/3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
@@ -3866,8 +3906,6 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.3
-    dev: true
-    optional: true
 
   /debug/4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@@ -4235,6 +4273,34 @@ packages:
       is-symbol: 1.0.4
     dev: true
 
+  /es5-ext/0.10.62:
+    resolution: {integrity: sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==}
+    engines: {node: '>=0.10'}
+    requiresBuild: true
+    dependencies:
+      es6-iterator: 2.0.3
+      es6-symbol: 3.1.3
+      next-tick: 1.1.0
+    dev: false
+    optional: true
+
+  /es6-iterator/2.0.3:
+    resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.62
+      es6-symbol: 3.1.3
+    dev: false
+    optional: true
+
+  /es6-symbol/3.1.3:
+    resolution: {integrity: sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==}
+    dependencies:
+      d: 1.0.1
+      ext: 1.7.0
+    dev: false
+    optional: true
+
   /esbuild-android-64/0.14.54:
     resolution: {integrity: sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==}
     engines: {node: '>=12'}
@@ -4896,6 +4962,11 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /eventsource/2.0.2:
+    resolution: {integrity: sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==}
+    engines: {node: '>=12.0.0'}
+    dev: false
+
   /execa/5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
@@ -4933,6 +5004,13 @@ packages:
       homedir-polyfill: 1.0.3
     dev: true
 
+  /ext/1.7.0:
+    resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
+    dependencies:
+      type: 2.7.2
+    dev: false
+    optional: true
+
   /extend-shallow/2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
     engines: {node: '>=0.10.0'}
@@ -5011,6 +5089,13 @@ packages:
       reusify: 1.0.4
     dev: true
 
+  /faye-websocket/0.11.4:
+    resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
+    engines: {node: '>=0.8.0'}
+    dependencies:
+      websocket-driver: 0.7.4
+    dev: false
+
   /figures/3.2.0:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
@@ -5597,6 +5682,10 @@ packages:
       entities: 4.3.1
     dev: true
 
+  /http-parser-js/0.5.8:
+    resolution: {integrity: sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==}
+    dev: false
+
   /human-signals/2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
@@ -5684,7 +5773,6 @@ packages:
 
   /inherits/2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: true
 
   /ini/1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
@@ -5996,6 +6084,11 @@ packages:
       text-extensions: 1.9.0
     dev: true
 
+  /is-typedarray/1.0.0:
+    resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
+    dev: false
+    optional: true
+
   /is-unicode-supported/0.1.0:
     resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
     engines: {node: '>=10'}
@@ -6628,7 +6721,6 @@ packages:
 
   /ms/2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
-    dev: true
 
   /ms/2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
@@ -6636,8 +6728,6 @@ packages:
 
   /ms/2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-    dev: true
-    optional: true
 
   /mute-stream/0.0.8:
     resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
@@ -6699,6 +6789,11 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
 
+  /next-tick/1.1.0:
+    resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
+    dev: false
+    optional: true
+
   /nice-try/1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
     dev: true
@@ -6722,6 +6817,12 @@ packages:
       whatwg-url: 5.0.0
     dev: true
 
+  /node-gyp-build/4.5.0:
+    resolution: {integrity: sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg==}
+    hasBin: true
+    dev: false
+    optional: true
+
   /node-html-parser/5.4.1:
     resolution: {integrity: sha512-xy/O2wOEBJsIRLs4avwa1lVY7tIpXXOoHHUJLa0GvnoPPqMG1hgBVl1tNI3GHOwRktTVZy+Y6rjghk4B9/NLyg==}
     dependencies:
@@ -7362,6 +7463,10 @@ packages:
       strict-uri-encode: 1.1.0
     dev: true
 
+  /querystringify/2.2.0:
+    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+    dev: false
+
   /queue-microtask/1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -7542,6 +7647,10 @@ packages:
     resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
     dev: false
 
+  /requires-port/1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+    dev: false
+
   /resize-observer-polyfill/1.5.1:
     resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
     dev: false
@@ -7697,7 +7806,6 @@ packages:
 
   /safe-buffer/5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
-    dev: true
 
   /safe-regex/1.1.0:
     resolution: {integrity: sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==}
@@ -7895,6 +8003,19 @@ packages:
       - supports-color
     dev: true
 
+  /sockjs-client/1.6.1:
+    resolution: {integrity: sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==}
+    engines: {node: '>=12'}
+    dependencies:
+      debug: 3.2.7
+      eventsource: 2.0.2
+      faye-websocket: 0.11.4
+      inherits: 2.0.4
+      url-parse: 1.5.10
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /sort-object-keys/1.1.3:
     resolution: {integrity: sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==}
     dev: true
@@ -8032,6 +8153,14 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /stompjs/2.3.3:
+    resolution: {integrity: sha512-5l/Ogz0DTFW7TrpHF0LAETGqM/so8UxNJvYZjJKqcX31EVprSQgnGkO80tZctPC/lFBDUrSFiTG3xd0R27XAIA==}
+    optionalDependencies:
+      websocket: 1.0.34
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /strict-uri-encode/1.1.0:
     resolution: {integrity: sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==}
     engines: {node: '>=0.10.0'}
@@ -8646,6 +8775,23 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /type/1.2.0:
+    resolution: {integrity: sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==}
+    dev: false
+    optional: true
+
+  /type/2.7.2:
+    resolution: {integrity: sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==}
+    dev: false
+    optional: true
+
+  /typedarray-to-buffer/3.1.5:
+    resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
+    dependencies:
+      is-typedarray: 1.0.0
+    dev: false
+    optional: true
+
   /typescript/3.9.10:
     resolution: {integrity: sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==}
     engines: {node: '>=4.2.0'}
@@ -8877,11 +9023,27 @@ packages:
     deprecated: Please see https://github.com/lydell/urix#deprecated
     dev: true
 
+  /url-parse/1.5.10:
+    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+    dependencies:
+      querystringify: 2.2.0
+      requires-port: 1.0.0
+    dev: false
+
   /use/3.1.1:
     resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /utf-8-validate/5.0.10:
+    resolution: {integrity: sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==}
+    engines: {node: '>=6.14.2'}
+    requiresBuild: true
+    dependencies:
+      node-gyp-build: 4.5.0
+    dev: false
+    optional: true
+
   /util-deprecate/1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
@@ -9265,6 +9427,36 @@ packages:
     resolution: {integrity: sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==}
     dev: true
 
+  /websocket-driver/0.7.4:
+    resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==}
+    engines: {node: '>=0.8.0'}
+    dependencies:
+      http-parser-js: 0.5.8
+      safe-buffer: 5.2.1
+      websocket-extensions: 0.1.4
+    dev: false
+
+  /websocket-extensions/0.1.4:
+    resolution: {integrity: sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==}
+    engines: {node: '>=0.8.0'}
+    dev: false
+
+  /websocket/1.0.34:
+    resolution: {integrity: sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==}
+    engines: {node: '>=4.0.0'}
+    requiresBuild: true
+    dependencies:
+      bufferutil: 4.0.7
+      debug: 2.6.9
+      es5-ext: 0.10.62
+      typedarray-to-buffer: 3.1.5
+      utf-8-validate: 5.0.10
+      yaeti: 0.0.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+    optional: true
+
   /whatwg-url/5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
     dependencies:
@@ -9542,6 +9734,12 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /yaeti/0.0.6:
+    resolution: {integrity: sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==}
+    engines: {node: '>=0.10.32'}
+    dev: false
+    optional: true
+
   /yallist/4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true

src/utils/http/axios/index.ts

@@ -255,8 +255,28 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
     )
 }
 
+// =============================================================================
+// 生产环境
+// const host = 'https://beta.app.yiring.com'
+// let apiUrl = `${host}`
+
+// 开发环境
+const host = globSetting.apiUrl
+let apiUrl = `${host}`
+
+// 检查生产环境，使用对应 env 中的配置，保留原有方式方便开发中调试
+apiUrl = import.meta.env.MODE !== 'development' ? globSetting.apiUrl : apiUrl
+// 如果使用代理访问网站，则默认使用代理 API 地址
+// apiUrl = isProxy(window.location.host) ? `http://proxy.yiring.com` : apiUrl
+export { apiUrl }
+// =============================================================================
+
 // TODO: 实际项目所需的请求配置，可自定义扩展
-export const defHttp = createAxios()
+export const defHttp = createAxios({
+    requestOptions: {
+        apiUrl,
+    },
+})
 
 // other api url
 // export const otherHttp = createAxios({

src/utils/stomp/index.ts

+import type { Client, Frame, Message } from 'stompjs'
+import SockJS from 'sockjs-client/dist/sockjs.min.js'
+import Stomp from 'stompjs'
+import { getToken } from '/@/utils/auth'
+import { useGlobSetting } from '/@/hooks/setting'
+import { useMessage } from '/@/hooks/web/useMessage'
+import { apiUrl } from '/@/utils/http/axios'
+
+const { createMessage } = useMessage()
+
+/**
+ * WebSocket Stomp 实例
+ */
+class StompInstance {
+    // 连接地址
+    private url: string
+
+    // 是否开启调试模式
+    private debug: boolean
+
+    // Stomp 实例
+    private client: Client
+
+    // 订阅集合
+    private subscribes: Recordable
+
+    // 重连延时标记
+    private reconnectId: NodeJS.Timeout
+
+    // 重连间隔
+    private reconnectInterval: number
+
+    // 检查订阅延时标记
+    private checkSubscribeId: NodeJS.Timeout
+
+    // 检查订阅的时间间隔
+    private checkSubscribeInterval = 3000
+
+    // 缓存 token
+    token: string
+
+    // 缓存用户信息
+    info: Recordable
+
+    constructor({
+        url,
+        debug = false,
+        reconnectInterval = 10000,
+    }: {
+        url: string
+        debug?: boolean
+        reconnectInterval?: number
+    }) {
+        // 重连间隔
+        this.reconnectInterval = reconnectInterval
+        // 是否打印debug信息
+        this.debug = debug
+        // ws地址
+        this.url = url
+        // stomp实例
+        this.client = null
+        // 重连事件编号
+        this.reconnectId = null
+        // 订阅集合
+        this.subscribes = {}
+    }
+
+    /**
+     * 创建连接
+     */
+    connect() {
+        // 如已存在连接则不创建
+        if (this.client && this.client.connected) {
+            return
+        }
+
+        // 从缓存中获取token
+        const token = getToken() as string
+        const options = token ? { token } : {}
+
+        // 创建 Stomp 实例
+        this.client = Stomp.over(new SockJS(this.url))
+
+        // 控制是否打印debug信息
+        if (!this.debug) {
+            this.client.debug = () => {}
+        }
+
+        // 连接
+        this.client.connect(
+            options,
+            (frame: Frame) => {
+                // 缓存连接用户信息
+                this.token = token
+                this.info = JSON.parse(frame.body)
+
+                if (this.debug) {
+                    console.log(`[Stomp] connected, user: ${this.info.user}`)
+                }
+
+                // 检查消息订阅
+                this.loopCheckSubscribe()
+
+                // 订阅全局通知
+                this.client.subscribe('/user/topic/notice', (frame: Recordable) => {
+                    if (this.debug) {
+                        console.debug('STOMP Notice: ', frame.body)
+                    }
+
+                    const body = JSON.parse(frame.body)
+                    if (body.status === 400) {
+                        createMessage.warn(body.message)
+                    } else if (body.status === 401) {
+                        // TODO: 退出登录
+                    }
+
+                    // TODO 根据实际情况再行补充
+                })
+
+                // 尝试登录
+                this.send('/app/login', { token })
+            },
+            (_: Frame) => {
+                // 重连
+                this.reconnectId = setTimeout(() => {
+                    this.reconnect()
+                }, this.reconnectInterval)
+            },
+        )
+    }
+
+    /**
+     * 重新连接
+     */
+    reconnect() {
+        // 订阅状态置false
+        Object.keys(this.subscribes).forEach((key) => {
+            this.subscribes[key]['subscribed'] = false
+        })
+
+        // 停止重连事件
+        if (this.reconnectId) {
+            clearTimeout(this.reconnectId)
+            this.reconnectId = null
+        }
+        // 停止订阅状态检查
+        if (this.checkSubscribeId) {
+            clearTimeout(this.checkSubscribeId)
+            this.checkSubscribeId = null
+        }
+
+        // 连接
+        this.connect()
+    }
+
+    /**
+     * 断开连接
+     */
+    disconnect() {
+        // 断开连接
+        if (this.client) {
+            this.client.disconnect(() => {})
+        }
+        // 停止重连事件
+        if (this.reconnectId) {
+            clearTimeout(this.reconnectId)
+            this.reconnectId = null
+        }
+        // 停止订阅状态检查
+        if (this.checkSubscribeId) {
+            clearTimeout(this.checkSubscribeId)
+            this.checkSubscribeId = null
+        }
+        // 清空所有除订阅缓存
+        this.subscribes = {}
+    }
+
+    /**
+     * 订阅
+     * @param {string} destination 主题
+     * @param {Function} callback 回调
+     */
+    subscribe(destination: string, callback: (message: Message) => any) {
+        if (this.subscribes[destination] && this.subscribes[destination]['subscribed']) {
+            // 已订阅
+            return
+        } else if (this.client && this.client.connected) {
+            // 已连接：调用订阅，缓存订阅信息
+            const subscribe = this.client.subscribe(destination, (res: Message) => callback(res))
+            this.subscribes[destination] = { callback: callback, subscribed: true, subscribe: subscribe }
+        } else {
+            // 未连接：缓存订阅信息
+            this.subscribes[destination] = { callback: callback, subscribed: false }
+        }
+    }
+
+    /**
+     * 取消订阅
+     * @param {string} destination 主题
+     */
+    unsubscribe(destination: string) {
+        if (this.subscribes[destination]) {
+            // 取消订阅
+            this.subscribes[destination].subscribe.unsubscribe()
+            // 删除订阅缓存
+            delete this.subscribes[destination]
+        }
+    }
+
+    /**
+     * 轮询检查订阅状态
+     */
+    loopCheckSubscribe() {
+        this.checkSubscribeId = setInterval(() => {
+            Object.keys(this.subscribes).forEach((key) => {
+                this.subscribe(key, this.subscribes[key].callback)
+            })
+        }, this.checkSubscribeInterval)
+    }
+
+    /**
+     * 向服务器发送消息
+     * @param {string} destination 主题
+     * @param {Object | string} message 消息内容
+     * @param {Object} headers 消息头
+     */
+    send(destination: string, message: Object | string, headers?: Object) {
+        if (this.client) {
+            this.client.send(destination, headers, typeof message === 'object' ? JSON.stringify(message) : message)
+        }
+    }
+}
+
+const globSetting = useGlobSetting()
+const baseUrl = apiUrl + globSetting.urlPrefix
+const instance = new StompInstance({
+    url: `${baseUrl}/stomp/sock-js`,
+    debug: false,
+})
+
+export default instance

types/utils.d.ts

@@ -3,3 +3,5 @@ import type { ComputedRef, Ref } from 'vue'
 export type DynamicProps<T> = {
     [P in keyof T]: Ref<T[P]> | T[P] | ComputedRef<T[P]>
 }
+
+declare module 'sockjs-client/dist/sockjs.min.js'