SmartOpsWeb/src/components/liveCall/index.vue

<template>
  <!--测试 张三 : 17260625724565   李四: 17260625724123-->
  <div class="live-call-block">
    <live-call-item ref="recordLeftRef" :recordObj="recordLeftObj" :headData="leftHeadData"/>
    <live-call-item ref="recordRightRef" :recordObj="recordRightObj" :headData="rightHeadData"/>
  </div>
</template>

<script setup>
import {useAuthStore} from '@/stores/userstore.js'
import {getToken} from '@/utils/auth'
import {usePermisstionStroe} from '@/stores/permisstion'

const permisstionStore = usePermisstionStroe()
const authStore = useAuthStore()
//聊天消息滚动面板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({
      content: []
    }
    // {
    //   "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({
      content: []
    }
    // {
    //   "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 handleLogout = () => {
  authStore.userLogout()
  permisstionStore.removeMenu()
  router.push('/login')
}
const initWebSocket = () => {
  try {
    // const wsUrl=setWsUrl(`/ws/text/${token}`)
    const wsUrl = `ws://frp.feashow.cn:31800/ws/text/${token}`
    // const wsUrl = `ws://112.19.165.99:20002/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') {
        if (data.type === 'error') {
          handleLogout()
          return;
        } else if (data.type === 'failed') {
          initWebSocket()
          return;
        }
        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))
    }, 5000)
  } catch (e) {
    console.log(e)
    console.log("ws连接失败");
  }
}
initWebSocket()
</script>

<style lang="scss" scoped>
.live-call-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  height: 50vh;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 6px;
  }

  // 滚动条轨道
  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  // 小滑块
  &::-webkit-scrollbar-thumb {
    background: rgba(80, 81, 82, 0.29);
    border-radius: 10px;
  }
}
</style>