邓洁 : socket

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>