From c5e1e871fff0dbca2319b389f4e594414a76d07d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Sun, 3 Dec 2023 22:30:37 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20=EF=BC=9Asocket?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/index.vue | 108 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 107 insertions(+), 1 deletion(-)

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 149c6f1..1273d12 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,11 +1,117 @@
 <template>
   <div>
-    home
+    <!--    home-->
+    <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">
+            server send:
+            <div>{{ item.cmd }}</div>
+          </div>
+          <div v-if="item.type == 4">
+            server receive:
+            <div>{{ item.cmd }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="logout">
+      <!--      <el-button >退出登录</el-button>-->
+    </div>
   </div>
 </template>
 
 <script setup>
+import {getToken} from "@/utils/auth";
+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}`
+  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 = null;
+}
+// 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: 300px;
+    border: 1px solid #ccc;
+    overflow-y: auto;
+    margin-top: 10px;
+  }
+}
+
+.logout {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
 </style>