feat: ✨ 集成websocket发送和订阅

Former-commit-id: ab14ea128a072a2a6b61b9654360f25767f5d18c

package.json

@@ -50,6 +50,7 @@
     "element-plus": "^2.3.12",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
+    "net": "^1.0.2",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.0",
@@ -57,8 +58,8 @@
     "screenfull": "^6.0.0",
     "sockjs-client": "1.6.1",
     "sortablejs": "^1.15.0",
-    "terser": "^5.19.3",
     "stompjs": "^2.3.3",
+    "terser": "^5.19.3",
     "vue": "^3.3.4",
     "vue-i18n": "9.2.2",
     "vue-router": "^4.2.0",

src/views/demo/websocket.vue

@@ -4,8 +4,8 @@ import { sendToAll, sendToUser } from "@/api/websocket"; // 点对点消息列
 
 import { useUserStore } from "@/store/modules/user";
 
-import SockJS from "sockjs-client"; // 报错 global is not defined 换成下面的引入
-//   import SockJS from "sockjs-client/dist/sockjs.min.js";
+//  import SockJS from "sockjs-client"; // 报错 global is not defined 换成下面的引入
+import SockJS from "sockjs-client/dist/sockjs.min.js";
 import Stomp from "stompjs";
 
 const inputVal = ref("初始内容");
@@ -17,6 +17,8 @@ const userId = useUserStore().userId;
 
 function handleSendToAll() {
   sendToAll(inputVal.value);
+
+  stompClient.send("/app/sendToAll", {}, inputVal.value);
 }
 
 function handleSendToUser() {
@@ -26,7 +28,9 @@ function handleSendToUser() {
 let stompClient: Stomp.Client;
 
 function initWebSocket() {
-  stompClient = Stomp.overWS("ws://localhost:8989/ws");
+  let socket = new SockJS("http://localhost:8989/ws");
+
+  stompClient = Stomp.over(socket);
 
   stompClient.connect({}, () => {
     console.log("连接成功");