Merge pull request '邓洁 ：socket' (#13) from dj into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/13

src/components/HelloWorld.vue

@@ -1,40 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/store/userstore.js

@@ -2,11 +2,11 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 import { getUserInfo, login } from "../api/login";
 import { ElMessage } from "element-plus";
-import {getAuthInfo, removeToken, setAuthInfo, setToken} from "../utils/auth";
+import {removeToken, setToken} from "../utils/auth";
 
 export const useAuthStore = defineStore('auth',()=>{
   const userinfo = ref({})
-  const permisstions = ref([])
+  const permissions = ref([])
   const roles = ref([])
   const userLogin = async (data) => {
     let flag
@@ -27,14 +27,14 @@ export const useAuthStore = defineStore('auth',()=>{
   const setUserInfo = async () => {
     await getUserInfo().then(res=>{
       userinfo.value = res.data.user
-      permisstions.value = res.data.permissions
+      permissions.value = res.data.permissions
       roles.value = res.data.roles
     })
   }
 
   return {
     userinfo,
-    permisstions,
+    permissions,
     userLogin,
     userLogout,
     setUserInfo

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;