From 3cc80b869766a0c94bb77af9d24ef9786b58f4cb Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Thu, 13 Feb 2025 11:28:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95webSocket=E8=BF=9E=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                   |  2 +-
 src/App.vue            |  9 +++++++++
 src/services/socket.ts | 25 +++++++++++++++++--------
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/.env b/.env
index 4048a53..b7f7c2a 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,3 @@
 VITE_API_HOST=127.0.0.1
 VITE_API_PORT=8080
-VITE_WS_PATH=/api/v1/app/ws/state
\ No newline at end of file
+VITE_WS_PATH=/ws
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 303b513..aa0670a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useRouter } from "vue-router";
 import { exceptionOb } from "./services/httpRequest";
+import { createWebSocket, sharedWsUrl } from "./services/socket";
 const router = useRouter();
 
 exceptionOb.subscribe(exp => {
@@ -8,6 +9,14 @@ exceptionOb.subscribe(exp => {
 		router.replace("/login");
 	}
 });
+
+console.log("ws url: ", sharedWsUrl);
+const wsClient = createWebSocket(sharedWsUrl);
+wsClient.dataOb.subscribe(data => {
+	console.log(data);
+});
+wsClient.connect();
+
 </script>
 
 <template>
diff --git a/src/services/socket.ts b/src/services/socket.ts
index cfcd286..e1fbd5e 100644
--- a/src/services/socket.ts
+++ b/src/services/socket.ts
@@ -1,6 +1,6 @@
 import { Subject } from "rxjs";
 
-export type SocketState = 'open' | 'close' | 'error'
+export type SocketState = "open" | "close" | "error";
 
 class WebSocketClient {
 	private ws: WebSocket | null = null;
@@ -9,9 +9,14 @@ class WebSocketClient {
 	private maxReconnectAttempts: number = 5;
 	private reconnectInterval: number = 3000;
 
-    readonly dataOb = new Subject()
-    readonly stateOb = new Subject<SocketState>()
-
+	private dataSub = new Subject();
+	get dataOb() {
+		return this.dataSub.asObservable();
+	}
+	private stateSub = new Subject<SocketState>();
+	get stateOb() {
+		return this.stateSub.asObservable();
+	}
 	constructor(url: string) {
 		this.url = url;
 	}
@@ -41,7 +46,7 @@ class WebSocketClient {
 		this.ws.onopen = () => {
 			console.log("WebSocket 连接已建立");
 			this.reconnectAttempts = -1; // 重置重连次数
-            this.stateOb.next('open')
+			this.stateSub.next("open");
 		};
 
 		// 接收消息的处理
@@ -49,20 +54,20 @@ class WebSocketClient {
 			try {
 				const data = JSON.parse(event.data);
 				// console.log('🚀 ~ WebSocketClient ~ bindEvents ~ data:', data)
-                this.dataOb.next(data)
+				this.dataSub.next(data);
 			} catch (error) {
 				console.error("消息解析错误:", error);
 			}
 		};
 
 		this.ws.onclose = () => {
-            this.stateOb.next('close')
+			this.stateSub.next("close");
 			console.log("WebSocket 连接已关闭");
 			this.reconnect();
 		};
 
 		this.ws.onerror = error => {
-            this.stateOb.next('error')
+			this.stateSub.next("error");
 			console.error("WebSocket 错误:", error);
 		};
 	}
@@ -106,3 +111,7 @@ export const createWebSocket = (url: string): WebSocketClient => {
 		return client;
 	}
 };
+
+export const sharedWsUrl = `ws://${import.meta.env.VITE_API_HOST}:${import.meta.env.VITE_API_PORT}${
+	import.meta.env.VITE_WS_PATH
+}`;