:add wss send

src/pages/login/index.vue

@@ -1,13 +1,27 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import Header from '@/components/Header/index.vue'
 import commuse from './components/commuse.vue'
-import { useWebSocket } from '@vueuse/core'
+import { Message } from '@arco-design/web-vue'
+import { useAppStore, useUserStore } from '@/store'
+const appStore = useAppStore()
 
 var wss = ref('')
-
 function login() {
-  const { status, data, send, open, close } = useWebSocket(wss.value)
+  if (wss.value) {
+    appStore.socketConnect(wss.value)
+  } else {
+    Message.error(`地址不正确`)
+  }
+}
+
+function send() {
+  const send_msg = {
+    type: 'CMD',
+    data: 'g',
+  }
+  const send_msg_str = JSON.stringify(send_msg)
+  appStore.socketSend(send_msg_str)
 }
 </script>
 <template>
@@ -25,12 +39,15 @@ function login() {
     <div>
       <div class="commuse-item">
         <div class="text-slate-900 dark:text-slate-100"> wss: </div>
-        <n-input v-model:value="wss" clearable placeholder="请从控制台获取" />
+        <a-input v-model="wss" clearable placeholder="请从控制台获取" />
       </div>
       <div class="title">
-        <n-button type="tertiary" @click="login"> 登录 </n-button>
+        <a-button type="outline" @click="login"> 登录 </a-button>
       </div>
     </div>
+    <div>
+      <a-button type="outline" @click="send"> send </a-button>
+    </div>
   </div>
 </template>
 <style lang="less" scoped>

src/store/modules/app/index.ts

@@ -1,6 +1,8 @@
 import { defineStore } from 'pinia'
 import piniaStore from '@/store/index'
 import { AppState } from './types';
+import { useWebSocket } from '@vueuse/core'
+import { watch } from 'vue'
 
 export const useAppStore = defineStore(
   // 唯一ID
@@ -9,7 +11,8 @@ export const useAppStore = defineStore(
     state: () => ({
       title: "FastVue3,一个快速开箱即用的Vue3+Vite模板",
       h1: 'Vue3+Vite2.x+Ts+Pinia大厂开发必备',
-            theme: 'dark'
+      theme: 'dark',
+      send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean | undefined) => { }
     }),
     getters: {},
     actions: {
@@ -25,14 +28,27 @@ export const useAppStore = defineStore(
           this.theme = 'dark';
           document.documentElement.classList.add('dark');
           document.body.setAttribute('arco-theme', 'dark');
-                    localStorage.setItem('theme',this.theme)
+          localStorage.setItem('theme', this.theme)
         } else {
           this.theme = 'light';
           document.documentElement.classList.remove('dark');
           document.body.removeAttribute('arco-theme');
-                    localStorage.setItem('theme',this.theme)
+          localStorage.setItem('theme', this.theme)
         }
       },
+      socketConnect(wss: string) {
+        const { status, data, send, open, close } = useWebSocket(wss)
+        watch(
+          data,
+          (v) => {
+            console.log(v);
+          }
+        )
+        this.send = send
+      },
+      socketSend(str: string) {
+        this.send(str)
+      }
     }
   }
 )