340 lines
7.7 KiB
Vue
340 lines
7.7 KiB
Vue
<template>
|
||
<div class="live-call">
|
||
<div class="header">
|
||
<div>
|
||
<span style="margin-right: 20px">张三</span>
|
||
<span>14785295642</span>
|
||
</div>
|
||
<div><span>工单名称：xxxxxx工单</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-if="item.id==userId" class="word-my">
|
||
<div class="info">
|
||
<p class="name">{{ item.nickName }} </p>
|
||
<div class="info-content">{{ item.contactText }}</div>
|
||
</div>
|
||
<el-avatar text="我"/>
|
||
</div>
|
||
<!-- 对方 -->
|
||
<div v-else class="word">
|
||
<el-avatar text="对方"/>
|
||
<div class="info">
|
||
<p class="name">{{ item.nickName }} </p>
|
||
<div class="info-content">{{ item.contactText }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {getToken} from '@/utils/auth'
|
||
|
||
const userId = ref(1)
|
||
const recordList = ref([{
|
||
id: 2,
|
||
nickName: 'AI助手',
|
||
contactText: '你好'
|
||
},
|
||
{
|
||
id: 1,
|
||
nickName: '我',
|
||
contactText: '你好!'
|
||
},
|
||
{
|
||
id: 2,
|
||
nickName: 'AI助手',
|
||
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 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);
|
||
}
|
||
}
|
||
//连接关闭的回调方法
|
||
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>
|
||
|
||
<style lang="scss" scoped>
|
||
.live-call {
|
||
width: 48%;
|
||
height: 47vh;
|
||
margin-bottom: 20px;
|
||
overflow: hidden;
|
||
border: 1px solid #d5d4d4;
|
||
border-radius: 10px;
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
height: 40px;
|
||
border-bottom: 1px solid #d5d4d4;
|
||
}
|
||
|
||
.scrollbar {
|
||
padding: 10px 10px 0 10px;
|
||
height: 42vh;
|
||
|
||
.el-scrollbar__wrap {
|
||
height: 100%;
|
||
overflow: scroll;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
// 聊天内容样式
|
||
.chat-content {
|
||
width: 100%;
|
||
|
||
.time-grap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
> span {
|
||
font-size: 13px;
|
||
padding: 5px 10px;
|
||
border: 1px solid #d7d9da;
|
||
border-radius: 25px;
|
||
}
|
||
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.word {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
|
||
img {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.info {
|
||
margin-left: 10px;
|
||
|
||
.name {
|
||
font-size: 12px;
|
||
color: rgba(51, 51, 51, 0.8);
|
||
margin: 0;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
margin-top: -5px;
|
||
}
|
||
|
||
.info-content {
|
||
padding: 10px;
|
||
font-size: 14px;
|
||
background: #f5f5f5;
|
||
position: relative;
|
||
margin-top: 8px;
|
||
border: 1px solid #f5f5f5;
|
||
}
|
||
|
||
//小三角形
|
||
.info-content::before {
|
||
position: absolute;
|
||
left: -8px;
|
||
top: 8px;
|
||
content: '';
|
||
border-right: 10px solid #f5f5f5;
|
||
border-top: 8px solid transparent;
|
||
border-bottom: 8px solid transparent;
|
||
}
|
||
}
|
||
}
|
||
|
||
.word-my {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-bottom: 20px;
|
||
|
||
img {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.info {
|
||
width: 90%;
|
||
margin-left: 10px;
|
||
text-align: right;
|
||
|
||
.name {
|
||
font-size: 12px;
|
||
color: rgba(51, 51, 51, 0.8);
|
||
height: 20px;
|
||
line-height: 20px;
|
||
margin-top: -5px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.info-content {
|
||
max-width: 70%;
|
||
padding: 10px;
|
||
font-size: 14px;
|
||
float: right;
|
||
margin-right: 10px;
|
||
position: relative;
|
||
margin-top: 8px;
|
||
background: #A3C3F6;
|
||
text-align: left;
|
||
}
|
||
|
||
//小三角形
|
||
.info-content::after {
|
||
position: absolute;
|
||
right: -8px;
|
||
top: 8px;
|
||
content: '';
|
||
border-left: 10px solid #A3C3F6;
|
||
border-top: 8px solid transparent;
|
||
border-bottom: 8px solid transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
</style>
|