From b80022801202b7ce4c461337565caeacf1b5a9a8 Mon Sep 17 00:00:00 2001
From: dengj <209192278@qq.com>
Date: Thu, 7 Dec 2023 16:16:09 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E6=9B=B4=E6=8D=A2?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js        |   8 +--
 src/views/home/index.vue   | 127 +++++++++++++++++++++++++++++++++++-
 src/views/socket/index.vue | 130 -------------------------------------
 src/views/tunnel/index.vue |   9 +++
 4 files changed, 137 insertions(+), 137 deletions(-)
 delete mode 100644 src/views/socket/index.vue
 create mode 100644 src/views/tunnel/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index ff2983c..bf716ad 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,11 +24,11 @@ const routes = [
     }
   },
   {
-    path: '/socket',
-    name: 'socket',
-    component: () => import('@/views/socket/index.vue'),
+    path: '/tunnel',
+    name: 'tunnel',
+    component: () => import('@/views/tunnel/index.vue'),
     meta: {
-      title: 'socket',
+      title: 'tunnel',
       breadcrumb: true
     }
   }
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index da75e22..a7423be 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,9 +1,130 @@
 <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>
 
 <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>
 
-<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>
\ No newline at end of file
diff --git a/src/views/socket/index.vue b/src/views/socket/index.vue
deleted file mode 100644
index a7423be..0000000
--- a/src/views/socket/index.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
new file mode 100644
index 0000000..da75e22
--- /dev/null
+++ b/src/views/tunnel/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <tunnel-scene />
+</template>
+
+<script setup>
+import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
+</script>
+
+<style lang="scss" scoped></style>