邓洁 ：socket

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>