odjbin/SmartOpsWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
odjbin
2024-09-16 00:48:57 +08:00
parent 78ba7aa69d
commit ecba5f4da1
2 changed files with 166 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
src/components/liveCall/LiveCallItem.vue
View File

@@ -2,20 +2,20 @@
<div class="live-call">
<div class="header">
<div>
<span style="margin-right: 20px">张三</span>
<span>14785295642</span>
<span style="margin-right: 20px">{{ headData.username }}</span>
<span>{{ headData.phone }}</span>
</div>
<div><span>工单名称：xxxxxx工单</span></div>
<div><span>工单名称：{{ headData.orderName }}</span></div>
</div>
<el-scrollbar ref="scrollbarRef" class="scrollbar">
<div class="chat-content" ref="innerRef">
<div class="time-grap"><span>6月5日 12:05</span></div>
<div v-for="(item,index) in recordList" :key="index">
<div v-for="(item,index) in recordObj.content" :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">
<p class="name">{{ item.nickName }} </p>
<div class="info-content">{{ item.contactText }}</div>
<p class="name">{{ item.speaker==0?headData.username:'AI助手' }} </p>
<div class="info-content">{{ item.message }}</div>
</div>
<el-avatar text="我"/>
</div>
@@ -23,8 +23,8 @@
<div v-else class="word">
<el-avatar text="对方"/>
<div class="info">
<p class="name">{{ item.nickName }} </p>
<div class="info-content">{{ item.contactText }}</div>
<p class="name">{{ item.speaker==0?headData.username:'AI助手' }} </p>
<div class="info-content">{{ item.message }}</div>
</div>
</div>
</div>
@@ -34,162 +34,24 @@
</template>
<script setup>
import {getToken} from '@/utils/auth'
const userId = ref(1)
const recordList = ref([{
id: 2,
nickName: 'AI助手',
contactText: '你好'
},
{
id: 1,
nickName: '我',
contactText: '你好!'
import {defineProps} from "vue";
const scrollbarRef=ref()
const props = defineProps({
recordObj: {
type: Object,
default: {}
},
{
id: 2,
nickName: 'AI助手',
contactText: '你好'
headData: {
type: Object,
default: {}
},
{
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 setWsUrl=(url)=>{
return (window.location.protocol === 'http:' ? "ws://" : "wss://")+window.location.host + import.meta.env.VITE_BASE_WSURL + url;
const getScrollbarRef=()=>{
return scrollbarRef.value
}
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);
}
}
//连接关闭的回调方法
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()
defineExpose({
getScrollbarRef
})
</script>
<style lang="scss" scoped>