添加chat功能

src/views/chat.vue

@@ -0,0 +1,139 @@
+<template>
+    <n-button @click="createGroup">
+        createTest
+    </n-button>
+    <n-text> createTest gID:{{ gID }}<br />key:{{ key }}<br />code:{{ gID+key }}</n-text>
+    <n-input
+            v-model:value="codeInput"
+            type="textarea"
+            placeholder="测试加入群组"
+    />
+    <n-button @click="joinGroup(codeInput)">
+        joinTest
+    </n-button>
+    <n-input
+            v-model:value="msg"
+            type="textarea"
+            placeholder="测试发送信息"
+    />
+    <n-button @click="sendMsg(codeInput.substring(0,8),msg)">
+        sendMsgTest
+    </n-button>
+    <n-button @click="data.length = 0">
+        clearMsg
+    </n-button>
+    <n-data-table
+        :columns="columns"
+        :data="data"
+        :row-props="null"
+        :max-height="250"
+        :bordered="false"
+        :single-line="false"
+    />
+</template>
+
+<script setup>
+import {ref} from 'vue'
+import {NText,NDataTable,NButton,NInput} from 'naive-ui'
+import { useSettingStore } from "@/pinia/store";
+import { generateKey,encryptString } from '@/func/upload';
+import { decryptString } from '@/func/download';
+
+
+
+const setting = useSettingStore();
+const serverPort = setting.serverPort;
+const baseUrl = 'ws' + "://" + location.hostname + ":" + serverPort;
+
+const columns = [
+    {
+        title: "from",
+        key: "from"
+    },
+    {
+        title: "message",
+        key: "msg"
+    },
+];
+const data = ref([])
+const gID = ref('')
+const codeInput = ref('')
+const key = ref('')
+const msg = ref('')
+const joinedGroup = []
+
+
+const gID2key = {}
+
+
+const socket = new WebSocket(baseUrl);
+socket.addEventListener("open", (event) => {
+//   socket.send("");
+});
+
+
+socket.addEventListener("message", (event) => {
+    const msg = JSON.parse(event.data)
+    data.value.push({from:'server',msg:event.data})
+    if(msg.type){
+        let type = msg.type
+        if(type === 'sMsg'){
+            let type1 = msg.type1
+            if(type1 === 'create'){
+                gID.value=msg.gID
+            }else if(type1 === 'joinVerify'){
+                let gID = msg.gID
+                let key = gID2key[gID]
+                console.log(gID2key,gID,key)
+                let res = decryptString(key,msg.verify)
+                console.log(res,key,msg.verify)
+                if(res === 'miaoSpring'){
+                    socket.send(JSON.stringify({type:'join',type1:'success',gID}))
+                    joinedGroup.push(msg.gID)
+                }
+            }else if(type1 === 'history'){
+                let gID = msg.gID
+                let key = gID2key[gID]
+                for(let m of JSON.parse(msg.history)){
+                    data.value.push({from:'decrypt',msg:decryptString(key,m.msg)})
+                }
+            }
+        }else if(type === 'gMsg'){
+            let gID = msg.gID
+            let key = gID2key[gID]
+            data.value.push({from:'decrypt',msg:decryptString(key,msg.msg)})
+        }
+    }
+});
+
+function createGroup(){
+    let keyt = generateKey(setting)
+    key.value = keyt
+    socket.send(JSON.stringify({type:'create',verify:encryptString(keyt,'miaoSpring',setting)}))
+}
+
+function joinGroup(code){
+    var gID = code.substring(0, 8);
+    var key = code.substring(8);
+    if(joinedGroup.includes(gID)){
+        return
+    }
+    gID2key[gID] = key
+    joinGroup_Verify(gID)
+}
+
+function joinGroup_Verify(gID){
+    socket.send(JSON.stringify({type:'join',type1:'verify',gID}))
+}
+
+function sendMsg(gID,msg){
+    let key = gID2key[gID]
+    msg = encryptString(key,msg,setting)
+    socket.send(JSON.stringify({type:'message',msg,gID}))
+}
+
+
+</script>
+
+<style>
+</style>