From 4afc8552df55aeed59f24a8e56d00ae074e81a6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Fri, 8 Dec 2023 22:36:52 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20socket?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/index.vue | 36 +++++++++++++-----------------------
 1 file changed, 13 insertions(+), 23 deletions(-)

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 532f716..b45bee4 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -9,7 +9,7 @@
       <el-button type="primary" @click="closeSocket">关闭连接</el-button>
       <el-button type="primary" @click="handleClear" style="float: right">清除</el-button>
       <div class="socket-box">
-        <div v-for="item in data" ref="child">
+        <div v-for="item in dataList" ref="child">
           <div v-if="item.type == 3">
             <span style="color: #007bff">server send:</span>
             <div>{{ item.cmd }}</div>
@@ -19,6 +19,10 @@
 
             <div>{{ item.cmd }}</div>
           </div>
+          <div v-if="item.type == 1">
+            <span style="color: red"> client send:</span>
+            <div>{{ item.cmd }}</div>
+          </div>
         </div>
       </div>
       <div style="display: flex">
@@ -43,12 +47,13 @@ const number = ref('')
 let send = {
   type: "ping"
 }
-let data = ref([])
+let dataList = ref([])
 let customerSend = ref([])
 let token = getToken();
 const child = ref();
+const clientSend=ref()
 watch(
-    () => data.value,
+    () => dataList.value,
     (newVal) => {
       nextTick(() => {
         child.value[newVal.length - 1].scrollIntoView(); // 关键代码
@@ -59,50 +64,36 @@ watch(
     }
 );
 let socket = reactive('')
-const handleSend=()=>{
-  console.log('JSON.stringify(number.value))',JSON.stringify(number.value))
+const handleSend = () => {
   let data = {
     type: 1,
-    cmd : number.value
+    cmd: number.value
   }
   socket.send(JSON.stringify(data))
+  dataList.value.push(data)
 }
 const initWebSocket = () => {
   // let wsUrl = `ws://192.168.31.175:9000/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))
-    // }
+    dataList.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();
@@ -112,9 +103,8 @@ const handleLogout = () => {
   router.push('/login')
 }
 const handleClear = () => {
-  data.value = []
+  dataList.value = []
 }
-// initWebSocket()
 </script>
 
 <style lang="scss" scoped>