fix : 修复公众台展示细节

package.json

@@ -17,8 +17,6 @@
     "pinia": "^2.0.35",
     "sass": "^1.62.1",
     "scss": "^0.2.4",
-    "sockjs-client": "^1.6.1",
-    "stompjs": "^2.3.3",
     "unplugin-icons": "^0.16.1",
     "vite-plugin-inspect": "^0.7.26",
     "vue": "^3.2.47",

src/components/liveCall/LiveCallItem.vue

@@ -34,8 +34,6 @@
 </template>
 
 <script setup>
-import Stomp from 'stompjs'
-import SockJS from 'sockjs-client/dist/sockjs.min.js'
 import {getToken} from '@/utils/auth'
 
 const userId = ref(1)
@@ -85,10 +83,13 @@ const recordList = ref([{
 //   scrollToBottom();
 // }, 1000)
 
-
 //聊天消息滚动面板dom
 const scrollbarRef = ref(null);
-
+let socket = reactive("");
+let token = getToken();
+let send = {
+  type: "ping",
+};
 //滚动面板自动滑动到底部
 const scrollToBottom = () => {
   if (scrollbarRef.value) {
@@ -100,42 +101,92 @@ const scrollToBottom = () => {
 nextTick(() => {
   scrollToBottom();
 })
-// onMounted(() => {
-//   scrollToBottom();
-// })
+
+const setWsUrl=(url)=>{
+  return (window.location.protocol === 'http:' ? "ws://" : "wss://")+window.location.host + import.meta.env.VITE_BASE_WSURL + url;
+}
 const initWebSocket = () => {
   try {
-    const wsUrl = "http://frp.feashow.cn:31800/ws"
-    const socket = new SockJS(wsUrl)
-    const stompClient = Stomp.over(socket);
-    stompClient.connect(
-        {"Authorization": getToken()},//传递token
-        (frame) => {
-          //测试topic
-          stompClient.subscribe("/topic/messages", (message) => {
-            const messagesList = document.getElementById('messagesList');
-            let listItem = document.createElement('li');
-            listItem.textContent = message.body;
-            messagesList.appendChild(listItem);
-          });
-          //测试发送
-          stompClient.send("/app/receive", {}, JSON.stringify({"user": "2222222"}))
-        },
-        (err) => {
-          console.log("错误：");
-          console.log(err);
-          //10s后重新连接一次
-          setTimeout(() => {
-            initWebSocket();
-          }, 10000)
-        }
-    );
+    // const wsUrl=setWsUrl(`/ws/text/${token}`)
+    const wsUrl=`ws://frp.feashow.cn:31800/ws/text/${token}`
+     socket = new WebSocket(wsUrl)
+    // 2. ws.send()给服务器发送信息
+    //连接发生错误的回调方法
+    socket.onerror = function () {
+      console.log("ws连接发生错误");
+    };
+    //连接成功建立的回调方法
+    socket.onopen = function () {
+      // let authInfo = {
+      //   token: getToken(),
+      //   type: "auth",
+      //   cluster: "notice"
+      // }
+      // socket.send(JSON.stringify(authInfo))
+      console.log("ws连接成功");
+    }
+    //接收到消息的回调方法
+    socket.onmessage = function (event) {
+      let data = JSON.parse(event.data)
+      console.log("服务器返回的信息: ", JSON.parse(event.data));
+    }
+    //连接关闭的回调方法
+    socket.onclose = function () {
+      // initWebSocket()
+      console.log("ws连接关闭");
+    }
+    setInterval(() => {
+      socket.send(JSON.stringify(send))
+    }, 3000)
   } catch (e) {
     console.log(e)
     console.log("ws连接失败");
   }
 }
 // initWebSocket()
+
+
+
+
+
+
+
+// onMounted(() => {
+//   scrollToBottom();
+// })
+// const initWebSocket = () => {
+//   try {
+//     const wsUrl = "http://frp.feashow.cn:31800/ws"
+//     const socket = new SockJS(wsUrl)
+//     const stompClient = Stomp.over(socket);
+//     stompClient.connect(
+//         {"Authorization": getToken()},//传递token
+//         (frame) => {
+//           //测试topic
+//           stompClient.subscribe("/topic/messages", (message) => {
+//             const messagesList = document.getElementById('messagesList');
+//             let listItem = document.createElement('li');
+//             listItem.textContent = message.body;
+//             messagesList.appendChild(listItem);
+//           });
+//           //测试发送
+//           stompClient.send("/app/receive", {}, JSON.stringify({"user": "2222222"}))
+//         },
+//         (err) => {
+//           console.log("错误：");
+//           console.log(err);
+//           //10s后重新连接一次
+//           setTimeout(() => {
+//             initWebSocket();
+//           }, 10000)
+//         }
+//     );
+//   } catch (e) {
+//     console.log(e)
+//     console.log("ws连接失败");
+//   }
+// }
+// initWebSocket()
 </script>
 
 <style lang="scss" scoped>