feat : 工作台实时通话记录socket初步对接

src/components/liveCall/index.vue

@@ -1,11 +1,151 @@
 <template>
-
+<!--测试 张三 : 17260625724565   李四: 17260625724123-->
   <div class="live-call-block">
-    <live-call-item v-for="item in 2"/>
+    <live-call-item ref="recordLeftRef" :recordObj="recordLeftObj" :headData="leftHeadData" />
+    <live-call-item ref="recordRightRef"  :recordObj="recordRightObj"  :headData="rightHeadData" />
   </div>
 </template>
 
 <script setup>
+import {getToken} from '@/utils/auth'
+//聊天消息滚动面板dom
+const recordLeftRef = ref(null);
+const recordRightRef = ref(null);
+const leftHeadData=ref({
+  username:'张三',
+  phone:'13546812315',
+  orderName:'张三工单',
+})
+const rightHeadData=ref({
+  username:'李四',
+  phone:'18246812546',
+  orderName:'李四工单',
+})
+const recordLeftObj = ref(
+    {
+      "callIdNumber": "17260625724565",
+      "content": [{
+        "callIdNumber": "17260625724565",
+        "conversationId": 0,
+        "conversationTimestamp": "2024-09-15 12:10",
+        "createTime": "2024-09-16",
+        "message": "你好11",
+        "speaker": "1"
+      },
+        {
+          "callIdNumber": "17260625724565",
+          "conversationId": 0,
+          "conversationTimestamp": "2024-09-15 16:10",
+          "createTime": "2024-09-16",
+          "message": "你好好11!",
+          "speaker": "0"
+        }
+      ],
+      "name": "",
+      "phone": "",
+      "timestamp": "1726416597958",
+      "type": "1"
+    }
+)
+const recordRightObj = ref(
+    {
+      "callIdNumber": "17260625724123",
+      "content": [{
+        "callIdNumber": "17260625724123",
+        "conversationId": 0,
+        "conversationTimestamp": "2024-09-15 12:10",
+        "createTime": "2024-09-16",
+        "message": "你好22",
+        "speaker": "1"
+      },
+        {
+          "callIdNumber": "17260625724123",
+          "conversationId": 0,
+          "conversationTimestamp": "2024-09-15 16:10",
+          "createTime": "2024-09-16",
+          "message": "你好好222!",
+          "speaker": "0"
+        }
+      ],
+      "name": "",
+      "phone": "",
+      "timestamp": "1726416597958",
+      "type": "2"
+    }
+)
+let socket = reactive("");
+let token = getToken();
+let send = {
+  type: "ping",
+};
+//滚动面板自动滑动到底部
+const scrollToBottom = (scrollbarRef) => {
+  if (scrollbarRef) {
+    const container = scrollbarRef.$el.querySelector('.el-scrollbar__wrap');
+    container.style.scrollBehavior = 'smooth'; // 添加平滑滚动效果
+    container.scrollTop = container.scrollHeight;
+  }
+};
+
+
+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=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)
+      if (data.type !== 'pong') {
+        console.log("服务器返回的信息: ", data);
+        if(data.type=='1'){
+            recordLeftObj.value.content.push(data.content)
+          console.info("🚀 ~method:onmessage -----", recordLeftObj.value)
+          nextTick(() => {
+            scrollToBottom(recordLeftRef.value)
+          })
+        }else {
+            recordRightObj.value.content.push(data.content)
+          console.info("🚀 ~method:onmessage -----", recordRightObj.value)
+          nextTick(() => {
+            scrollToBottom(recordRightRef.value);
+          })
+        }
+
+      }
+    }
+    //连接关闭的回调方法
+    socket.onclose = function () {
+      initWebSocket()
+      console.log("ws连接关闭");
+    }
+    setInterval(() => {
+      socket.send(JSON.stringify(send))
+    }, 10000)
+  } catch (e) {
+    console.log(e)
+    console.log("ws连接失败");
+  }
+}
+initWebSocket()
 </script>
 
 <style lang="scss" scoped>