Merge pull request '邓洁 : 更换路由' (#36) from dj into master
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/36
This commit is contained in:
odjbin
@@ -24,11 +24,11 @@ const routes = [
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/socket',
|
path: '/tunnel',
|
||||||
name: 'socket',
|
name: 'tunnel',
|
||||||
component: () => import('@/views/socket/index.vue'),
|
component: () => import('@/views/tunnel/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: 'socket',
|
title: 'tunnel',
|
||||||
breadcrumb: true
|
breadcrumb: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,130 @@
|
|||||||
<template>
|
<template>
|
||||||
<tunnel-scene />
|
<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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<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>
|
||||||
@@ -1,130 +0,0 @@
|
|||||||
<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>
|
|
||||||
9
src/views/tunnel/index.vue
Normal file
9
src/views/tunnel/index.vue
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<tunnel-scene />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
Reference in New Issue
Block a user