refactor: ♻️ 存入localStorage移除前缀，websocket hook重构优化

src/views/demo/websocket.vue

@@ -13,6 +13,7 @@
         <el-card>
           <el-row>
             <el-col :span="16">
+              <!-- 输入框允许修改 websocket 地址（注意：修改后不会自动更新已创建的 hook 实例） -->
               <el-input v-model="socketEndpoint" class="w-220px" />
               <el-button
                 type="primary"
@@ -94,98 +95,88 @@
 </template>
 
 <script setup lang="ts">
-import { Client } from "@stomp/stompjs";
-
+import { useStomp } from "@/hooks/useStomp";
+import { getAccessToken } from "@/utils/auth"; // 此处可与 hook 内 getToken 保持一致
 import { useUserStoreHook } from "@/store/modules/user";
-import { getToken } from "@/utils/auth";
 
 const userStore = useUserStoreHook();
-const isConnected = ref(false);
+// 用于手动调整 WebSocket 地址
 const socketEndpoint = ref(import.meta.env.VITE_APP_WS_ENDPOINT);
-
-const receiver = ref("root");
-
+// 同步连接状态
+const isConnected = ref(false);
+// 消息接收列表
 interface MessageType {
   type?: string;
   sender?: string;
   content: string;
 }
-
 const messages = ref<MessageType[]>([]);
+// 广播消息内容
+const topicMessage = ref("亲爱的朋友们，系统已恢复最新状态。");
+// 点对点消息内容（默认示例）
+const queneMessage = ref("Hi, " + userStore.userInfo.username + " 这里是点对点消息示例！");
+const receiver = ref("root");
 
-const topicMessage = ref("亲爱的大冤种们，由于一只史诗级的BUG，系统版本已经被迫回退到了0.0.1。"); // 广播消息
+// 调用 useStomp hook，默认使用 socketEndpoint 和 token（此处用 getAccessToken()）
+const {
+  isConnected: stompConnected,
+  connect,
+  subscribe,
+  disconnect,
+  client,
+} = useStomp({
+  brokerURL: socketEndpoint.value,
+  token: getAccessToken(),
+  reconnectDelay: 5000,
+  debug: true,
+});
 
-const queneMessage = ref(
-  "hi , " + receiver.value + " , 我是" + userStore.userInfo.username + " , 想和你交个朋友 ! "
-);
-
-let stompClient: Client;
-
-function connectWebSocket() {
-  stompClient = new Client({
-    brokerURL: socketEndpoint.value,
-    connectHeaders: {
-      Authorization: getToken(),
-    },
-    debug: (str: any) => {
-      console.log(str);
-    },
-    onConnect: () => {
-      console.log("连接成功");
-      isConnected.value = true;
+// 同步 hook 的连接状态到组件
+watch(stompConnected, (newVal) => {
+  isConnected.value = newVal;
+  if (newVal) {
+    // 连接成功后，订阅广播和点对点消息主题
+    subscribe("/topic/notice", (res) => {
       messages.value.push({
         sender: "Server",
-        content: "Websocket 已连接",
-        type: "tip",
+        content: res.body,
       });
-
-      stompClient.subscribe("/topic/notice", (res: any) => {
-        messages.value.push({
-          sender: "Server",
-          content: res.body,
-        });
-      });
-
-      stompClient.subscribe("/user/queue/greeting", (res: any) => {
-        const messageData = JSON.parse(res.body) as MessageType;
-        messages.value.push({
-          sender: messageData.sender,
-          content: messageData.content,
-        });
-      });
-    },
-    onStompError: (frame: any) => {
-      console.error("Broker reported error: " + frame.headers["message"]);
-      console.error("Additional details: " + frame.body);
-    },
-    onDisconnect: () => {
-      isConnected.value = false;
+    });
+    subscribe("/user/queue/greeting", (res) => {
+      const messageData = JSON.parse(res.body) as MessageType;
       messages.value.push({
-        sender: "Server",
-        content: "Websocket 已断开",
-        type: "tip",
+        sender: messageData.sender,
+        content: messageData.content,
       });
-    },
-  });
-
-  stompClient.activate();
-}
-
-function disconnectWebSocket() {
-  if (stompClient && stompClient.connected) {
-    stompClient.deactivate();
-    isConnected.value = false;
+    });
+    messages.value.push({
+      sender: "Server",
+      content: "Websocket 已连接",
+      type: "tip",
+    });
+  } else {
     messages.value.push({
       sender: "Server",
       content: "Websocket 已断开",
       type: "tip",
     });
   }
+});
+
+// 连接 WebSocket
+function connectWebSocket() {
+  connect();
 }
 
+// 断开 WebSocket
+function disconnectWebSocket() {
+  disconnect();
+}
+
+// 发送广播消息
 function sendToAll() {
-  if (stompClient.connected) {
-    stompClient.publish({
+  if (client && client.connected) {
+    client.publish({
       destination: "/topic/notice",
       body: topicMessage.value,
     });
@@ -196,9 +187,10 @@ function sendToAll() {
   }
 }
 
+// 发送点对点消息
 function sendToUser() {
-  if (stompClient.connected) {
-    stompClient.publish({
+  if (client && client.connected) {
+    client.publish({
       destination: "/app/sendToUser/" + receiver.value,
       body: queneMessage.value,
     });
@@ -212,6 +204,10 @@ function sendToUser() {
 onMounted(() => {
   connectWebSocket();
 });
+
+onBeforeUnmount(() => {
+  disconnectWebSocket();
+});
 </script>
 
 <style scoped>
@@ -219,40 +215,33 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
 }
-
 .message {
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
 }
-
 .message--sent {
   align-self: flex-end;
   background-color: #dcf8c6;
 }
-
 .message--received {
   align-self: flex-start;
   background-color: #e8e8e8;
 }
-
 .message-content {
   display: flex;
   flex-direction: column;
 }
-
 .message-sender {
   margin-bottom: 5px;
   font-weight: bold;
   text-align: right;
 }
-
 .message-receiver {
   margin-bottom: 5px;
   font-weight: bold;
   text-align: left;
 }
-
 .tip-message {
   align-self: center;
   padding: 5px 10px;