feat : 工作台实时通话记录socket初步对接
This commit is contained in:
@@ -2,20 +2,20 @@
|
|||||||
<div class="live-call">
|
<div class="live-call">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div>
|
<div>
|
||||||
<span style="margin-right: 20px">张三</span>
|
<span style="margin-right: 20px">{{ headData.username }}</span>
|
||||||
<span>14785295642</span>
|
<span>{{ headData.phone }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div><span>工单名称：xxxxxx工单</span></div>
|
<div><span>工单名称：{{ headData.orderName }}</span></div>
|
||||||
</div>
|
</div>
|
||||||
<el-scrollbar ref="scrollbarRef" class="scrollbar">
|
<el-scrollbar ref="scrollbarRef" class="scrollbar">
|
||||||
<div class="chat-content" ref="innerRef">
|
<div class="chat-content" ref="innerRef">
|
||||||
<div class="time-grap"><span>6月5日 12:05</span></div>
|
<div v-for="(item,index) in recordObj.content" :key="index">
|
||||||
<div v-for="(item,index) in recordList" :key="index">
|
<div class="time-grap"><span>{{ item.conversationTimestamp || '6月5日 12:05' }}</span></div>
|
||||||
<!-- 我的 -->
|
<!-- 我的 -->
|
||||||
<div v-if="item.id==userId" class="word-my">
|
<div v-if="item.speaker==0" class="word-my">
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p class="name">{{ item.nickName }} </p>
|
<p class="name">{{ item.speaker==0?headData.username:'AI助手' }} </p>
|
||||||
<div class="info-content">{{ item.contactText }}</div>
|
<div class="info-content">{{ item.message }}</div>
|
||||||
</div>
|
</div>
|
||||||
<el-avatar text="我"/>
|
<el-avatar text="我"/>
|
||||||
</div>
|
</div>
|
||||||
@@ -23,8 +23,8 @@
|
|||||||
<div v-else class="word">
|
<div v-else class="word">
|
||||||
<el-avatar text="对方"/>
|
<el-avatar text="对方"/>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p class="name">{{ item.nickName }} </p>
|
<p class="name">{{ item.speaker==0?headData.username:'AI助手' }} </p>
|
||||||
<div class="info-content">{{ item.contactText }}</div>
|
<div class="info-content">{{ item.message }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -34,162 +34,24 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {getToken} from '@/utils/auth'
|
import {defineProps} from "vue";
|
||||||
|
const scrollbarRef=ref()
|
||||||
const userId = ref(1)
|
const props = defineProps({
|
||||||
const recordList = ref([{
|
recordObj: {
|
||||||
id: 2,
|
type: Object,
|
||||||
nickName: 'AI助手',
|
default: {}
|
||||||
contactText: '你好'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
nickName: '我',
|
|
||||||
contactText: '你好!'
|
|
||||||
},
|
},
|
||||||
{
|
headData: {
|
||||||
id: 2,
|
type: Object,
|
||||||
nickName: 'AI助手',
|
default: {}
|
||||||
contactText: '你好'
|
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
nickName: '我',
|
|
||||||
contactText: '你好!'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
nickName: 'AI助手',
|
|
||||||
contactText: '你好'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
nickName: '我',
|
|
||||||
contactText: '你好!'
|
|
||||||
},
|
|
||||||
|
|
||||||
])
|
|
||||||
// setInterval(() => {
|
|
||||||
// recordList.value.push( {
|
|
||||||
// id: 1,
|
|
||||||
// nickName: '我',
|
|
||||||
// contactText: '45535'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 2,
|
|
||||||
// nickName: 'AI助手',
|
|
||||||
// contactText: '555'
|
|
||||||
// })
|
|
||||||
// scrollToBottom();
|
|
||||||
// }, 1000)
|
|
||||||
|
|
||||||
//聊天消息滚动面板dom
|
|
||||||
const scrollbarRef = ref(null);
|
|
||||||
let socket = reactive("");
|
|
||||||
let token = getToken();
|
|
||||||
let send = {
|
|
||||||
type: "ping",
|
|
||||||
};
|
|
||||||
//滚动面板自动滑动到底部
|
|
||||||
const scrollToBottom = () => {
|
|
||||||
if (scrollbarRef.value) {
|
|
||||||
const container = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap');
|
|
||||||
container.style.scrollBehavior = 'smooth'; // 添加平滑滚动效果
|
|
||||||
container.scrollTop = container.scrollHeight;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
nextTick(() => {
|
|
||||||
scrollToBottom();
|
|
||||||
})
|
})
|
||||||
|
const getScrollbarRef=()=>{
|
||||||
const setWsUrl=(url)=>{
|
return scrollbarRef.value
|
||||||
return (window.location.protocol === 'http:' ? "ws://" : "wss://")+window.location.host + import.meta.env.VITE_BASE_WSURL + url;
|
|
||||||
}
|
}
|
||||||
const initWebSocket = () => {
|
defineExpose({
|
||||||
try {
|
getScrollbarRef
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//连接关闭的回调方法
|
|
||||||
socket.onclose = function () {
|
|
||||||
// initWebSocket()
|
|
||||||
console.log("ws连接关闭");
|
|
||||||
}
|
|
||||||
setInterval(() => {
|
|
||||||
socket.send(JSON.stringify(send))
|
|
||||||
}, 30000)
|
|
||||||
} 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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@@ -1,11 +1,151 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<!--测试 张三 : 17260625724565 李四: 17260625724123-->
|
||||||
<div class="live-call-block">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user