邓洁 ：socket

src/views/home/index.vue

@@ -7,28 +7,33 @@
         <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>-->
+            <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">
-            server send:
+            <span style="color: #007bff">server send:</span>
             <div>{{ item.cmd }}</div>
           </div>
           <div v-if="item.type == 4">
-            server receive:
+            <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 >退出登录</el-button>-->
+      <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"
@@ -48,9 +53,10 @@ watch(
       deep: true,
     }
 );
-let socket=reactive('')
+let socket = reactive('')
 const initWebSocket = () => {
-  let wsUrl = `ws://192.168.31.175:8000/wstunnel/debug/${token}/${serialNumber.value}`
+  // 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()给服务器发送信息
@@ -86,7 +92,14 @@ const initWebSocket = () => {
   // }, 30000)
 }
 const closeSocket = () => {
-  socket = null;
+  socket.close();
+}
+const handleLogout = () => {
+  authStore.userLogout()
+  router.push('/login')
+}
+const handleClear = () => {
+  data.value = []
 }
 // initWebSocket()
 </script>
@@ -102,7 +115,7 @@ const closeSocket = () => {
 
   .socket-box {
     width: 475px;
-    height: 300px;
+    height: 450px;
     border: 1px solid #ccc;
     overflow-y: auto;
     margin-top: 10px;