From 4f119adb9ee71abb590160a894a0395835f44ba9 Mon Sep 17 00:00:00 2001
From: hxr <1490493387@qq.com>
Date: Tue, 14 May 2024 07:40:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20sockjs-client=20=E6=8A=A5?=
 =?UTF-8?q?=E9=94=99=20`global=20is=20not=20defined`=20=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91=E7=8E=AF=E5=A2=83=E6=97=A0=E6=B3=95=E6=89=93?=
 =?UTF-8?q?=E5=BC=80=20WebSocket=20=E9=A1=B5=E9=9D=A2=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closed https://github.com/sockjs/sockjs-client/issues/565
---
 src/typings/socket.d.ts      |   6 +
 src/views/demo/websocket.vue | 229 ++++++++++++++++++-----------------
 2 files changed, 121 insertions(+), 114 deletions(-)
 create mode 100644 src/typings/socket.d.ts

diff --git a/src/typings/socket.d.ts b/src/typings/socket.d.ts
new file mode 100644
index 00000000..15a8ed78
--- /dev/null
+++ b/src/typings/socket.d.ts
@@ -0,0 +1,6 @@
+// https://github.com/sockjs/sockjs-client/issues/565
+
+declare module "sockjs-client/dist/sockjs.min.js" {
+  import Client from "sockjs-client";
+  export default Client;
+}
diff --git a/src/views/demo/websocket.vue b/src/views/demo/websocket.vue
index ab1202e4..74eb67ba 100644
--- a/src/views/demo/websocket.vue
+++ b/src/views/demo/websocket.vue
@@ -1,117 +1,3 @@
-<!-- websocket 示例 -->
-<script setup lang="ts">
-import SockJS from "sockjs-client";
-import Stomp from "stompjs";
-
-import { useUserStoreHook } from "@/store/modules/user";
-import { TOKEN_KEY } from "@/enums/CacheEnum";
-
-const userStore = useUserStoreHook();
-
-const isConnected = ref(false);
-const socketEndpoint = ref("http://47.117.115.107:8989/ws"); // 线上
-// const socketEndpoint = ref("http://localhost:8989/ws"); // 本地
-
-const receiver = ref("root");
-
-interface MessageType {
-  type?: string; // 消息类型： tip-提示消息
-  sender?: string;
-  content: string;
-}
-
-const messages = ref<MessageType[]>([]);
-
-const topicMessage = ref(
-  "亲爱的大冤种们，由于一只史诗级的BUG，系统版本已经被迫回退到了0.0.1。"
-); // 广播消息
-
-const queneMessage = ref(
-  "hi , " +
-    receiver.value +
-    " , 我是" +
-    userStore.user.username +
-    " , 想和你交个朋友 ! "
-);
-
-function sendToAll() {
-  stompClient.send("/app/sendToAll", {}, topicMessage.value);
-  messages.value.push({
-    sender: userStore.user.username,
-    content: topicMessage.value,
-  });
-}
-
-function sendToUser() {
-  stompClient.send("/app/sendToUser/" + receiver.value, {}, queneMessage.value);
-  messages.value.push({
-    sender: userStore.user.username,
-    content: queneMessage.value,
-  });
-}
-
-let stompClient: Stomp.Client;
-
-function connectWebSocket() {
-  let socket = new SockJS(socketEndpoint.value);
-
-  stompClient = Stomp.over(socket);
-
-  stompClient.connect(
-    { Authorization: localStorage.getItem(TOKEN_KEY) },
-    () => {
-      isConnected.value = true;
-      messages.value.push({
-        sender: "Server",
-        content: "Websocket 已连接",
-        type: "tip",
-      });
-
-      stompClient.subscribe("/topic/notice", (res: any) => {
-        messages.value.push({
-          sender: "Server",
-          content: res.body,
-        });
-      });
-
-      stompClient.subscribe("/user/queue/greeting", (res) => {
-        const messageData = JSON.parse(res.body) as MessageType;
-        messages.value.push({
-          sender: messageData.sender,
-          content: messageData.content,
-        });
-      });
-    },
-    (error) => {
-      console.log("连接失败: " + error);
-      isConnected.value = false; // 更新连接状态
-      messages.value.push({
-        sender: "Server",
-        content: "Websocket 已断开",
-        type: "tip",
-      });
-    }
-  );
-}
-
-function disconnectWebSocket() {
-  if (stompClient && stompClient.connected) {
-    stompClient.disconnect(() => {
-      isConnected.value = false; // 更新连接状态
-      messages.value.push({
-        sender: "Server",
-        content: "Websocket 已断开",
-        type: "tip",
-      });
-    });
-  }
-}
-
-onMounted(() => {
-  connectWebSocket();
-});
-</script>
-
 <template>
   <div class="app-container">
     <el-link
@@ -216,6 +102,121 @@ onMounted(() => {
   </div>
 </template>
 
+<!-- websocket 示例 -->
+<script setup lang="ts">
+import SockJS from "sockjs-client/dist/sockjs.min.js";
+//import SockJS from "sockjs-client";
+import Stomp from "stompjs";
+
+import { useUserStoreHook } from "@/store/modules/user";
+import { TOKEN_KEY } from "@/enums/CacheEnum";
+
+const userStore = useUserStoreHook();
+
+const isConnected = ref(false);
+// const socketEndpoint = ref("http://47.117.115.107:8989/ws"); // 线上
+const socketEndpoint = ref("http://localhost:8989/ws"); // 本地
+
+const receiver = ref("root");
+
+interface MessageType {
+  type?: string; // 消息类型： tip-提示消息
+  sender?: string;
+  content: string;
+}
+
+const messages = ref<MessageType[]>([]);
+
+const topicMessage = ref(
+  "亲爱的大冤种们，由于一只史诗级的BUG，系统版本已经被迫回退到了0.0.1。"
+); // 广播消息
+
+const queneMessage = ref(
+  "hi , " +
+    receiver.value +
+    " , 我是" +
+    userStore.user.username +
+    " , 想和你交个朋友 ! "
+);
+
+function sendToAll() {
+  stompClient.send("/app/sendToAll", {}, topicMessage.value);
+  messages.value.push({
+    sender: userStore.user.username,
+    content: topicMessage.value,
+  });
+}
+
+function sendToUser() {
+  stompClient.send("/app/sendToUser/" + receiver.value, {}, queneMessage.value);
+  messages.value.push({
+    sender: userStore.user.username,
+    content: queneMessage.value,
+  });
+}
+
+let stompClient: Stomp.Client;
+
+function connectWebSocket() {
+  let socket = new SockJS(socketEndpoint.value);
+
+  stompClient = Stomp.over(socket);
+
+  stompClient.connect(
+    { Authorization: localStorage.getItem(TOKEN_KEY) },
+    () => {
+      isConnected.value = true;
+      messages.value.push({
+        sender: "Server",
+        content: "Websocket 已连接",
+        type: "tip",
+      });
+
+      stompClient.subscribe("/topic/notice", (res: any) => {
+        messages.value.push({
+          sender: "Server",
+          content: res.body,
+        });
+      });
+
+      stompClient.subscribe("/user/queue/greeting", (res) => {
+        const messageData = JSON.parse(res.body) as MessageType;
+        messages.value.push({
+          sender: messageData.sender,
+          content: messageData.content,
+        });
+      });
+    },
+    (error) => {
+      console.log("连接失败: " + error);
+      isConnected.value = false; // 更新连接状态
+      messages.value.push({
+        sender: "Server",
+        content: "Websocket 已断开",
+        type: "tip",
+      });
+    }
+  );
+}
+
+function disconnectWebSocket() {
+  if (stompClient && stompClient.connected) {
+    stompClient.disconnect(() => {
+      isConnected.value = false; // 更新连接状态
+      messages.value.push({
+        sender: "Server",
+        content: "Websocket 已断开",
+        type: "tip",
+      });
+    });
+  }
+}
+
+onMounted(() => {
+  connectWebSocket();
+});
+</script>
+
 <style scoped>
 .message-container {
   display: flex;