From cdb6df4a8ff5d1b01f0231b5250e7bb7a5d03832 Mon Sep 17 00:00:00 2001 From: Xwen <929716663@qq.com> Date: Thu, 4 Jan 2024 21:37:35 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=BC=95=E5=85=A5=E9=95=BF=E8=BF=9E?= =?UTF-8?q?=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Yi.Bbs.Vue3/.env.development | 4 +- Yi.Bbs.Vue3/.env.production | 4 +- Yi.Bbs.Vue3/package-lock.json | 279 ++- Yi.Bbs.Vue3/package.json | 1 + Yi.Bbs.Vue3/src/stores/socket.js | 23 + Yi.Bbs.Vue3/src/utils/signalR.js | 120 + Yi.Bbs.Vue3/src/views/home/Index.vue | 21 +- Yi.Bbs.Vue3/yarn.lock | 3200 +++++++++++++++----------- 8 files changed, 2242 insertions(+), 1410 deletions(-) create mode 100644 Yi.Bbs.Vue3/src/stores/socket.js create mode 100644 Yi.Bbs.Vue3/src/utils/signalR.js diff --git a/Yi.Bbs.Vue3/.env.development b/Yi.Bbs.Vue3/.env.development index 827a6925..41b3bb9e 100644 --- a/Yi.Bbs.Vue3/.env.development +++ b/Yi.Bbs.Vue3/.env.development @@ -2,4 +2,6 @@ VITE_APP_BASEAPI="/api-dev" VITE_APP_URL="http://123.207.63.87:19001/api/app" # VITE_APP_URL="http://localhost:19001/api/app" -VITE_APP_ENV_NAME = "dev" \ No newline at end of file +VITE_APP_ENV_NAME = "dev" +# ws/开发环境 +VITE_APP_BASE_WS = '/dev-ws' \ No newline at end of file diff --git a/Yi.Bbs.Vue3/.env.production b/Yi.Bbs.Vue3/.env.production index aa1823ea..bd11868b 100644 --- a/Yi.Bbs.Vue3/.env.production +++ b/Yi.Bbs.Vue3/.env.production @@ -1,4 +1,6 @@ # 接口前缀 VITE_APP_BASEAPI="/prod-api" VITE_APP_URL="http://123.207.63.87:19001/api/app" -VITE_APP_ENV_NAME = "pro" \ No newline at end of file +VITE_APP_ENV_NAME = "pro" +# ws/开发环境 +VITE_APP_BASE_WS = '/dev-ws' \ No newline at end of file diff --git a/Yi.Bbs.Vue3/package-lock.json b/Yi.Bbs.Vue3/package-lock.json index 5ad6ffe1..54d90ce0 100644 --- a/Yi.Bbs.Vue3/package-lock.json +++ b/Yi.Bbs.Vue3/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@element-plus/icons-vue": "^2.1.0", + "@microsoft/signalr": "^8.0.0", "axios": "^1.3.4", "echarts": "^5.4.2", "element-plus": "^2.2.32", @@ -852,6 +853,18 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "node_modules/@microsoft/signalr": { + "version": "8.0.0", + "resolved": "https://registry.npmmirror.com/@microsoft/signalr/-/signalr-8.0.0.tgz", + "integrity": "sha512-K/wS/VmzRWePCGqGh8MU8OWbS1Zvu7DG7LSJS62fBB8rJUXwwj4axQtqrAAwKGUZHQF6CuteuQR9xMsVpM2JNA==", + "dependencies": { + "abort-controller": "^3.0.0", + "eventsource": "^2.0.2", + "fetch-cookie": "^2.0.3", + "node-fetch": "^2.6.7", + "ws": "^7.4.5" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1452,6 +1465,17 @@ "dev": true, "peer": true }, + "node_modules/abort-controller": { + "version": "3.0.0", + "resolved": "https://registry.npmmirror.com/abort-controller/-/abort-controller-3.0.0.tgz", + "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==", + "dependencies": { + "event-target-shim": "^5.0.0" + }, + "engines": { + "node": ">=6.5" + } + }, "node_modules/acorn": { "version": "8.8.2", "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz", @@ -2069,6 +2093,14 @@ "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz", "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" }, + "node_modules/event-target-shim": { + "version": "5.0.1", + "resolved": "https://registry.npmmirror.com/event-target-shim/-/event-target-shim-5.0.1.tgz", + "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==", + "engines": { + "node": ">=6" + } + }, "node_modules/events": { "version": "3.3.0", "resolved": "https://registry.npmmirror.com/events/-/events-3.3.0.tgz", @@ -2079,6 +2111,14 @@ "node": ">=0.8.x" } }, + "node_modules/eventsource": { + "version": "2.0.2", + "resolved": "https://registry.npmmirror.com/eventsource/-/eventsource-2.0.2.tgz", + "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -2117,6 +2157,15 @@ "reusify": "^1.0.4" } }, + "node_modules/fetch-cookie": { + "version": "2.1.0", + "resolved": "https://registry.npmmirror.com/fetch-cookie/-/fetch-cookie-2.1.0.tgz", + "integrity": "sha512-39+cZRbWfbibmj22R2Jy6dmTbAWC+oqun1f1FzQaNurkPDUP4C38jpeZbiXCR88RKRVDp8UcDrbFXkNhN+NjYg==", + "dependencies": { + "set-cookie-parser": "^2.4.8", + "tough-cookie": "^4.0.0" + } + }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz", @@ -2815,6 +2864,25 @@ "dev": true, "peer": true }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmmirror.com/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/node-fetch-native": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/node-fetch-native/-/node-fetch-native-1.0.2.tgz", @@ -2988,15 +3056,24 @@ "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==", "dev": true }, + "node_modules/psl": { + "version": "1.9.0", + "resolved": "https://registry.npmmirror.com/psl/-/psl-1.9.0.tgz", + "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==" + }, "node_modules/punycode": { "version": "2.3.0", "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.0.tgz", "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==", - "dev": true, "engines": { "node": ">=6" } }, + "node_modules/querystringify": { + "version": "2.2.0", + "resolved": "https://registry.npmmirror.com/querystringify/-/querystringify-2.2.0.tgz", + "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==" + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -3059,6 +3136,11 @@ "node": ">=0.10.0" } }, + "node_modules/requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz", @@ -3176,6 +3258,11 @@ "randombytes": "^2.1.0" } }, + "node_modules/set-cookie-parser": { + "version": "2.6.0", + "resolved": "https://registry.npmmirror.com/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz", + "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==" + }, "node_modules/slash": { "version": "4.0.0", "resolved": "https://registry.npmmirror.com/slash/-/slash-4.0.0.tgz", @@ -3405,6 +3492,25 @@ "node": ">=8.0" } }, + "node_modules/tough-cookie": { + "version": "4.1.3", + "resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-4.1.3.tgz", + "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==", + "dependencies": { + "psl": "^1.1.33", + "punycode": "^2.1.1", + "universalify": "^0.2.0", + "url-parse": "^1.5.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" + }, "node_modules/tslib": { "version": "2.3.0", "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", @@ -3480,6 +3586,14 @@ "node": ">=12" } }, + "node_modules/universalify": { + "version": "0.2.0", + "resolved": "https://registry.npmmirror.com/universalify/-/universalify-0.2.0.tgz", + "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==", + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/unplugin": { "version": "1.1.0", "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.1.0.tgz", @@ -3623,6 +3737,15 @@ "punycode": "^2.1.0" } }, + "node_modules/url-parse": { + "version": "1.5.10", + "resolved": "https://registry.npmmirror.com/url-parse/-/url-parse-1.5.10.tgz", + "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==", + "dependencies": { + "querystringify": "^2.1.1", + "requires-port": "^1.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -3732,6 +3855,11 @@ "node": ">=10.13.0" } }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" + }, "node_modules/webpack": { "version": "5.75.0", "resolved": "https://registry.npmmirror.com/webpack/-/webpack-5.75.0.tgz", @@ -3867,6 +3995,35 @@ "node": ">=6" } }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, + "node_modules/ws": { + "version": "7.5.9", + "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz", + "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", + "engines": { + "node": ">=8.3.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/xss": { "version": "1.0.14", "resolved": "https://registry.npmmirror.com/xss/-/xss-1.0.14.tgz", @@ -4440,6 +4597,18 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "@microsoft/signalr": { + "version": "8.0.0", + "resolved": "https://registry.npmmirror.com/@microsoft/signalr/-/signalr-8.0.0.tgz", + "integrity": "sha512-K/wS/VmzRWePCGqGh8MU8OWbS1Zvu7DG7LSJS62fBB8rJUXwwj4axQtqrAAwKGUZHQF6CuteuQR9xMsVpM2JNA==", + "requires": { + "abort-controller": "^3.0.0", + "eventsource": "^2.0.2", + "fetch-cookie": "^2.0.3", + "node-fetch": "^2.6.7", + "ws": "^7.4.5" + } + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4974,6 +5143,14 @@ "dev": true, "peer": true }, + "abort-controller": { + "version": "3.0.0", + "resolved": "https://registry.npmmirror.com/abort-controller/-/abort-controller-3.0.0.tgz", + "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==", + "requires": { + "event-target-shim": "^5.0.0" + } + }, "acorn": { "version": "8.8.2", "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz", @@ -5477,6 +5654,11 @@ "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz", "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" }, + "event-target-shim": { + "version": "5.0.1", + "resolved": "https://registry.npmmirror.com/event-target-shim/-/event-target-shim-5.0.1.tgz", + "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==" + }, "events": { "version": "3.3.0", "resolved": "https://registry.npmmirror.com/events/-/events-3.3.0.tgz", @@ -5484,6 +5666,11 @@ "dev": true, "peer": true }, + "eventsource": { + "version": "2.0.2", + "resolved": "https://registry.npmmirror.com/eventsource/-/eventsource-2.0.2.tgz", + "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==" + }, "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -5519,6 +5706,15 @@ "reusify": "^1.0.4" } }, + "fetch-cookie": { + "version": "2.1.0", + "resolved": "https://registry.npmmirror.com/fetch-cookie/-/fetch-cookie-2.1.0.tgz", + "integrity": "sha512-39+cZRbWfbibmj22R2Jy6dmTbAWC+oqun1f1FzQaNurkPDUP4C38jpeZbiXCR88RKRVDp8UcDrbFXkNhN+NjYg==", + "requires": { + "set-cookie-parser": "^2.4.8", + "tough-cookie": "^4.0.0" + } + }, "fill-range": { "version": "7.0.1", "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz", @@ -6059,6 +6255,14 @@ "dev": true, "peer": true }, + "node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmmirror.com/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "requires": { + "whatwg-url": "^5.0.0" + } + }, "node-fetch-native": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/node-fetch-native/-/node-fetch-native-1.0.2.tgz", @@ -6191,11 +6395,20 @@ "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==", "dev": true }, + "psl": { + "version": "1.9.0", + "resolved": "https://registry.npmmirror.com/psl/-/psl-1.9.0.tgz", + "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==" + }, "punycode": { "version": "2.3.0", "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.0.tgz", - "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==", - "dev": true + "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==" + }, + "querystringify": { + "version": "2.2.0", + "resolved": "https://registry.npmmirror.com/querystringify/-/querystringify-2.2.0.tgz", + "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==" }, "queue-microtask": { "version": "1.2.3", @@ -6253,6 +6466,11 @@ "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", "dev": true }, + "requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz", @@ -6341,6 +6559,11 @@ "randombytes": "^2.1.0" } }, + "set-cookie-parser": { + "version": "2.6.0", + "resolved": "https://registry.npmmirror.com/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz", + "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==" + }, "slash": { "version": "4.0.0", "resolved": "https://registry.npmmirror.com/slash/-/slash-4.0.0.tgz", @@ -6516,6 +6739,22 @@ "is-number": "^7.0.0" } }, + "tough-cookie": { + "version": "4.1.3", + "resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-4.1.3.tgz", + "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==", + "requires": { + "psl": "^1.1.33", + "punycode": "^2.1.1", + "universalify": "^0.2.0", + "url-parse": "^1.5.3" + } + }, + "tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" + }, "tslib": { "version": "2.3.0", "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", @@ -6589,6 +6828,11 @@ } } }, + "universalify": { + "version": "0.2.0", + "resolved": "https://registry.npmmirror.com/universalify/-/universalify-0.2.0.tgz", + "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==" + }, "unplugin": { "version": "1.1.0", "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.1.0.tgz", @@ -6698,6 +6942,15 @@ "punycode": "^2.1.0" } }, + "url-parse": { + "version": "1.5.10", + "resolved": "https://registry.npmmirror.com/url-parse/-/url-parse-1.5.10.tgz", + "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==", + "requires": { + "querystringify": "^2.1.1", + "requires-port": "^1.0.0" + } + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -6765,6 +7018,11 @@ "graceful-fs": "^4.1.2" } }, + "webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" + }, "webpack": { "version": "5.75.0", "resolved": "https://registry.npmmirror.com/webpack/-/webpack-5.75.0.tgz", @@ -6877,6 +7135,21 @@ "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==", "dev": true }, + "whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "requires": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, + "ws": { + "version": "7.5.9", + "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz", + "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", + "requires": {} + }, "xss": { "version": "1.0.14", "resolved": "https://registry.npmmirror.com/xss/-/xss-1.0.14.tgz", diff --git a/Yi.Bbs.Vue3/package.json b/Yi.Bbs.Vue3/package.json index ca48b253..489e93b7 100644 --- a/Yi.Bbs.Vue3/package.json +++ b/Yi.Bbs.Vue3/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "@element-plus/icons-vue": "^2.1.0", + "@microsoft/signalr": "^8.0.0", "axios": "^1.3.4", "echarts": "^5.4.2", "element-plus": "^2.2.32", diff --git a/Yi.Bbs.Vue3/src/stores/socket.js b/Yi.Bbs.Vue3/src/stores/socket.js new file mode 100644 index 00000000..09c79c82 --- /dev/null +++ b/Yi.Bbs.Vue3/src/stores/socket.js @@ -0,0 +1,23 @@ +import { defineStore } from "pinia"; + +const socketStore = defineStore("socket", { + state: () => ({ + onlineNum: 1, + }), + actions: { + // 获取在线总数 + getOnlineNum() { + return this.onlineNum; + }, + // 设置在线总数 + setOnlineNum(value) { + this.onlineNum = value; + }, + }, + persist: { + key: "onlineInfo", + storage: window.sessionStorage, + }, +}); + +export default socketStore; diff --git a/Yi.Bbs.Vue3/src/utils/signalR.js b/Yi.Bbs.Vue3/src/utils/signalR.js new file mode 100644 index 00000000..10b4d847 --- /dev/null +++ b/Yi.Bbs.Vue3/src/utils/signalR.js @@ -0,0 +1,120 @@ +// 官方文档：https://docs.microsoft.com/zh-cn/aspnet/core/signalr/javascript-client?view=aspnetcore-6.0&viewFallbackFrom=aspnetcore-2.2&tabs=visual-studio +import * as signalR from "@microsoft/signalr"; +import useSocketStore from "@/stores/socket"; +import useAuths from "@/hooks/useAuths"; +import useUserStore from "@/stores/user"; + +const { getToken } = useAuths(); +export default { + // signalR对象 + SR: {}, + // 失败连接重试次数 + failNum: 4, + async init(url) { + const connection = new signalR.HubConnectionBuilder() + .withUrl(`${import.meta.env.VITE_APP_BASE_WS}/` + url, { + headers: { + Authorization: `Bearer ${getToken()}`, + }, + accessTokenFactory: () => { + // 返回授权 token + return `${getToken()}`; + }, + }) + + .withAutomaticReconnect() //自动重新连接 + .configureLogging(signalR.LogLevel.Information) + .build(); + + console.log(connection, "connection"); + + this.SR = connection; + // 断线重连 + connection.onclose(async () => { + console.log("断开连接了"); + console.assert( + connection.state === signalR.HubConnectionState.Disconnected + ); + // 建议用户重新刷新浏览器 + await this.start(); + }); + + connection.onreconnected(() => { + console.log("断线重新连接成功"); + }); + this.receiveMsg(connection); + // 启动 + await this.start(); + }, + /** + * 调用 this.signalR.start().then(async () => { await this.SR.invoke("method")}) + * @returns + */ + async close() { + try { + var that = this; + await this.SR.stop(); + } catch {} + }, + + async start() { + var that = this; + + try { + //使用async和await 或 promise的then 和catch 处理来自服务端的异常 + console.log(this.SR, "执行连接"); + await this.SR.start(); + //console.assert(this.SR.state === signalR.HubConnectionState.Connected); + //console.log('signalR 连接成功了', this.SR.state); + return true; + } catch (error) { + that.failNum--; + //console.log(`失败重试剩余次数${that.failNum}`, error) + if (that.failNum > 0) { + setTimeout(async () => { + await this.SR.start(); + }, 5000); + } + return false; + } + }, + // 接收消息处理 + receiveMsg(connection) { + connection.on("onlineNum", (data) => { + const socketStore = useSocketStore(); + socketStore.setOnlineNum(data); + }); + connection.on("forceOut", (msg) => { + useUserStore() + .logOut() + .then(() => { + alert(msg); + location.href = "/index"; + }); + }); + // connection.on("onlineNum", (data) => { + // store.dispatch("socket/changeOnlineNum", data); + // }); + // // 接收欢迎语 + // connection.on("welcome", (data) => { + // console.log('welcome', data) + // Notification.info(data) + // }); + // // 接收后台手动推送消息 + // connection.on("receiveNotice", (title, data) => { + // Notification({ + // type: 'info', + // title: title, + // message: data, + // dangerouslyUseHTMLString: true, + // duration: 0 + // }) + // }) + // // 接收系统通知/公告 + // connection.on("moreNotice", (data) => { + // if (data.code == 200) { + // store.dispatch("socket/getNoticeList", data.data); + // } + // }) + }, +}; diff --git a/Yi.Bbs.Vue3/src/views/home/Index.vue b/Yi.Bbs.Vue3/src/views/home/Index.vue index 965ed3e6..a01bc333 100644 --- a/Yi.Bbs.Vue3/src/views/home/Index.vue +++ b/Yi.Bbs.Vue3/src/views/home/Index.vue @@ -145,7 +145,7 @@