130 lines
3.2 KiB
Vue
130 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<div class="chat-box">
|
|
<div>
|
|
<span>请输入序列号: </span>
|
|
<el-input v-model="serialNumber" placeholder="请输入序列号" clearable></el-input>
|
|
</div>
|
|
<el-button type="primary" @click="initWebSocket">确认连接</el-button>
|
|
<el-button type="primary" @click="closeSocket">关闭连接</el-button>
|
|
<div class="socket-box">
|
|
<div v-for="item in data" ref="child">
|
|
<div v-if="item.type == 3">
|
|
<span style="color: #007bff">server send:</span>
|
|
<div>{{ item.cmd }}</div>
|
|
</div>
|
|
<div v-if="item.type == 4">
|
|
<span style="color: #28a745"> server receive:</span>
|
|
|
|
<div>{{ item.cmd }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-button type="primary" @click="handleClear" style="float: right">清除</el-button>
|
|
</div>
|
|
<div class="logout">
|
|
<el-button @click="handleLogout">退出登录</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {getToken} from "@/utils/auth";
|
|
import {useAuthStore} from '@/store/userstore.js'
|
|
|
|
const router = useRouter()
|
|
const authStore = useAuthStore()
|
|
const serialNumber = ref('')
|
|
let send = {
|
|
type: "ping"
|
|
}
|
|
let data = ref([])
|
|
let customerSend = ref([])
|
|
let token = getToken();
|
|
const child = ref();
|
|
watch(
|
|
() => data.value,
|
|
(newVal) => {
|
|
nextTick(() => {
|
|
child.value[newVal.length - 1].scrollIntoView(); // 关键代码
|
|
});
|
|
},
|
|
{
|
|
deep: true,
|
|
}
|
|
);
|
|
let socket = reactive('')
|
|
const initWebSocket = () => {
|
|
// let wsUrl = `ws://192.168.31.175:8000/wstunnel/debug/${token}/${serialNumber.value}`
|
|
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/debug/${token}/${serialNumber.value}`
|
|
console.log(wsUrl)
|
|
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) {
|
|
data.value.push(JSON.parse(event.data))
|
|
// else {
|
|
// customerSend.value.push(JSON.parse(event.data))
|
|
// }
|
|
console.log("服务器返回的信息: ", JSON.parse(event.data));
|
|
}
|
|
//连接关闭的回调方法
|
|
socket.onclose = function () {
|
|
// initWebSocket()
|
|
console.log("ws连接关闭");
|
|
}
|
|
// setInterval(() => {
|
|
// socket.send(JSON.stringify(send))
|
|
// }, 30000)
|
|
}
|
|
const closeSocket = () => {
|
|
socket.close();
|
|
}
|
|
const handleLogout = () => {
|
|
authStore.userLogout()
|
|
router.push('/login')
|
|
}
|
|
const handleClear = () => {
|
|
data.value = []
|
|
}
|
|
// initWebSocket()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chat-box {
|
|
width: 500px;
|
|
height: 600px;
|
|
border: 1px solid #ccc;
|
|
//overflow: auto;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
|
|
.socket-box {
|
|
width: 475px;
|
|
height: 450px;
|
|
border: 1px solid #ccc;
|
|
overflow-y: auto;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.logout {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
</style> |