修正AES加密字符串中对emoji处理的编码问题

package-lock.json

@@ -12,7 +12,7 @@
         "crypto-js": "^4.2.0",
         "express": "^4.18.2",
         "file-saver": "^2.0.5",
-        "js-base64": "^3.7.6",
+        "js-base64": "^3.7.7",
         "pinia": "^2.1.7",
         "sm-crypto": "^0.3.13",
         "uuid": "^9.0.1",
@@ -1568,9 +1568,9 @@
       }
     },
     "node_modules/js-base64": {
-      "version": "3.7.6",
+      "version": "3.7.7",
-      "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.6.tgz",
+      "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.7.tgz",
-      "integrity": "sha512-NPrWuHFxFUknr1KqJRDgUQPexQF0uIJWjeT+2KjEePhitQxQEx5EJBG1lVn5/hc8aLycTpXrDOgPQ6Zq+EDiTA=="
+      "integrity": "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw=="
     },
     "node_modules/jsbn": {
       "version": "1.1.0",

package.json

@@ -16,7 +16,7 @@
     "crypto-js": "^4.2.0",
     "express": "^4.18.2",
     "file-saver": "^2.0.5",
-    "js-base64": "^3.7.6",
+    "js-base64": "^3.7.7",
     "pinia": "^2.1.7",
     "sm-crypto": "^0.3.13",
     "uuid": "^9.0.1",

server.js

@@ -230,8 +230,8 @@ const server = http.createServer(app);
 const wss = new WebSocketServer({ server });
 // 先实现最低限度功能，暂时不考虑身份认证
 const groupsMap = {};
-// 三天不活跃的群组将被清除
+// 一天不活跃的群组将被清除
-const LifeOfGroup = millisecondsOfOneDay * 3;
+const LifeOfGroup = millisecondsOfOneDay * 1;
 // const LifeOfGroup = 0;
 // 根据uuid查询加入的群组
 const uuid2Groups={}
@@ -287,11 +287,11 @@ function createGroupTableDB(gID, verify) {
 }
 
 // 插入信息
-function insertMessageByGID(gID, msg, from) {
+function insertMessageByGID(gID, msg, from, timestamp) {
 	if (!generateStmt_insertMessage_map[gID]) {
 		generateStmt_insertMessage_map[gID] = db.prepare(`INSERT INTO ${gID} (message,type,sender, timestamp) VALUES (?, ?, ?, ?)`);
 	}
-	generateStmt_insertMessage_map[gID].run(msg, "gMsg", from, parseInt(Date.now()));
+	generateStmt_insertMessage_map[gID].run(msg, "gMsg", from, timestamp);
 }
 
 function updateActiveTimestamp(gID) {
@@ -326,12 +326,13 @@ function getHistory(gID) {
 }
 
 function broadcastMsg(gID, msg, from) {
+	const timestamp = parseInt(Date.now())
 	initMsgHistory(gID)
 	updateActiveTimestamp(gID);
-	insertMessageByGID(gID, msg, from);
+	insertMessageByGID(gID, msg, from, timestamp);
 
-	let bmsg = JSON.stringify({ type: "gMsg", gID, msg });
+	let bmsg = JSON.stringify({ type: "gMsg", gID, msg, from, timestamp });
-	groupsMap[gID].msgHistory.push({ type: "gMsg", msg, from });
+	groupsMap[gID].msgHistory.push({ type: "gMsg", msg, from, timestamp });
 	for (let socket of groupsMap[gID].member) {
 		socket.send(bmsg);
 	}
@@ -342,10 +343,10 @@ function initMsgHistory(gID){
 		let verify = stmt_getGroupVerify.get(gID).verify;
 		// 暂时这么写
 		let msgHistory = db
-			.prepare(`SELECT message,type FROM ${gID}`)
+			.prepare(`SELECT message,type,sender,timestamp FROM ${gID}`)
 			.all()
 			.map(v => {
-				return { msg: v.message, type: v.type };
+				return { type: v.type, msg: v.message,from:v.sender,timestamp:v.timestamp };
 			});
 		// console.log(msgHistory)
 		groupsMap[gID] = { verify, member: [], msgHistory };

src/App.vue

@@ -53,7 +53,8 @@ const menuOptions = [
     <div id="windows">
         <n-notification-provider placement="bottom-right" :max="3">
             <n-message-provider>
-                <n-card content-style="padding: 0; margin:0;" id="theCard">
+                <n-card content-style="padding: 0; margin:0" id="theCard">
+                    <!-- <n-scrollbar style="max-height: 100%"> -->
                         <div id="menu">
                             <n-menu mode="horizontal" :responsive="true" v-model:value="activePage" :options="menuOptions" :icon-size="26"></n-menu>
                         </div>
@@ -62,12 +63,9 @@ const menuOptions = [
                             <KeepAlive>
                                 <component :is="isComponent"></component>
                             </KeepAlive>
-                        <!-- <router-view v-slot="{ Component }">
-                            <keep-alive :include=['uploadFileMiao']>
-                            <component :is="Component" :key="$route.fullPath"/>
-                            </keep-alive>
-                        </router-view> -->
                         </div>
+
+                    <!-- </n-scrollbar> -->
                     <!-- <n-tabs type="line" size="large" :tabs-padding="20" pane-style="padding: 20px;"
                         display-directive="show">
                             <n-tab-pane name="上传文件">

src/func/download.js

@@ -41,7 +41,7 @@ const decrypt = (key, data) => {
 };
 const decryptString = (key, str) => {
 	key = key.trim()
-	console.log(key.length)
+	// console.log(key.length)
 	// 无加密
 	if (key.length === 0) {
 		// return sm4.decrypt(str, "miaospringmiaospringmiaospringao");
@@ -54,15 +54,19 @@ const decryptString = (key, str) => {
 		return sm4.decrypt(str, key);
 	}
 	// AES
-	var data = new Uint8Array(
+	// var data = new Uint8Array(
-		Base64.decode(str)
+	// 	Base64.decode(str)
-			.split(",")
+	// 		.split(",")
-			.map(n => parseInt(n))
+	// 		.map(n => parseInt(n))
-	);
+	// );
+	var data = Base64.toUint8Array(str)
+	// console.log(data)
+	// data = new TextDecoder().decode(data)
 	key = aesjs.utils.utf8.toBytes(key);
 	var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5));
 	var decryptedBytes = aesCtr.decrypt(data);
-	var decryptedStr = aesjs.utils.utf8.fromBytes(decryptedBytes);
+	// var decryptedStr = aesjs.utils.utf8.fromBytes(decryptedBytes);
+	var decryptedStr = new TextDecoder().decode(decryptedBytes)
 	return decryptedStr;
 };
 

src/func/upload.js

@@ -48,6 +48,8 @@ const blob2Uint8Array = function(blob) {
         };
     });
 };
+
+
 const AES = (key,data)=>{
     key = aesjs.utils.utf8.toBytes(key);
     var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5));
@@ -97,10 +99,13 @@ const encryptString = (key, str, setting) => {
         return Base64.encode(str)
     }else if(encryptFunction !== "SM4"){
         key = aesjs.utils.utf8.toBytes(key);
-        var data = aesjs.utils.utf8.toBytes(str);
+        // var data = aesjs.utils.utf8.toBytes(str);
+        var data = new TextEncoder().encode(str)
         var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5));
         var encryptedBytes = aesCtr.encrypt(data);
-        return Base64.encode(encryptedBytes);
+        var res = Base64.fromUint8Array(encryptedBytes,true);
+        // console.log(encryptedBytes,res)
+        return res;
     }else{
         key = [...aesjs.utils.utf8.toBytes(key.substring(3))];
         // console.log(key)

src/views/chat.vue

@@ -1,8 +1,20 @@
 <template>
-    <n-button @click="createGroup">
+    <n-flex style="padding-top: 10px;padding-bottom: 10px;">
-        createTest
+        <n-input v-model:value="groupCode" type="text" placeholder="输入进群码" style="flex:1">
+            <template #suffix>
+                <n-icon :component="CopyOutline" style="cursor: pointer;" @click='toClipboard(groupCode)' />
+            </template>
+        </n-input>
+        <n-flex>
+            <n-button @click="createGroup" :disabled="groupCode !== ''" :type="groupCode !== ''?'default':'primary'" ghost >
+                创建群组
             </n-button>
-    <n-text> createTest gID:{{ gID }}<br />key:{{ key }}<br />code:{{ gID+key }}</n-text>
+            <n-button @click="joinGroup(groupCode)" :disabled="groupCode === ''" :type="groupCode === ''?'default':'primary'" ghost>
+                加入群组
+            </n-button>
+        </n-flex>
+    </n-flex>
+    <!-- <n-text> createTest gID:{{ gID }}<br />key:{{ key }}<br />code:{{ gID+key }}</n-text>
     <n-input
             v-model:value="codeInput"
             type="textarea"
@@ -10,43 +22,84 @@
     />
     <n-button @click="joinGroup(codeInput)">
         joinTest
-    </n-button>
+    </n-button> -->
     <n-input
             v-model:value="msg"
             type="textarea"
             placeholder="测试发送信息"
+            :autosize="{
+                minRows: 3,
+                maxRows: 3
+            }"
     />
-    <n-button @click="sendMsg(codeInput.substring(0,8),msg)">
+    <n-flex style="padding-top: 10px;padding-bottom: 10px;">
-        sendMsgTest
+        <n-select v-model:value="activeGID" :options="joinedGroup.map(gid=>{return {label:gid,value:gid}})" placeholder="选择当前查看群组"
+            style="flex:1"/>
+        <n-button @click="sendMsg(activeGID,msg)" :disabled="msg === '' || activeGID === null"  :type="msg === '' || activeGID === null?'default':'primary'">
+            发送消息
         </n-button>
-    <n-button @click="data.length = 0">
+    </n-flex>
+    <!-- <n-button @click="dataTest.length = 0">
         clearMsg
-    </n-button>
+    </n-button> -->
     <n-data-table
         :columns="columns"
-        :data="data"
+        :data="activeGID?Messages[activeGID].map(v=>{v.timestampString = new Date(v.timestamp).toLocaleString();return v}):[]"
         :row-props="null"
-        :max-height="250"
         :bordered="false"
         :single-line="false"
+        :max-height="400"
     />
 </template>
 
 <script setup>
 import {ref} from 'vue'
-import {NText,NDataTable,NButton,NInput} from 'naive-ui'
+import { useNotification } from "naive-ui";
+import useClipboard from "vue-clipboard3";
+import {NIcon,NFlex,NDataTable,NButton,NInput,NSelect} from 'naive-ui'
 import { useSettingStore } from "@/pinia/store";
 import { generateKey,encryptString } from '@/func/upload';
 import { decryptString } from '@/func/download';
 import WebsocketHeartbeatJs from 'websocket-heartbeat-js';
+import {CopyOutline} from '@vicons/ionicons5'
 
 
 
+const notification = useNotification();
+const { toClipboard } = useClipboard();
+
 const setting = useSettingStore();
 const serverPort = setting.serverPort;
 const baseUrl = 'ws' + "://" + location.hostname + ":" + serverPort;
 
 const columns = [
+    {
+        "title": "type",
+        "key": "type",
+        width: 80
+    },
+    {
+        "title": "from",
+        "key": "from",
+        width: 80
+    },
+    {
+        "title": "timestamp",
+        "key": "timestampString",
+        width: 150,
+        // sorter: {
+        //     compare: (a, b) => {
+        //         // console.log(a,b,new Date(a),parseInt(new Date(a)) - parseInt(new Date(b)))
+        //         return parseInt(new Date(a.timestamp)) - parseInt(new Date(b.timestamp))
+        //     },
+        // }
+    },
+    {
+        "title": "msg",
+        "key": "msg"
+    }
+]
+const columnsTest = [
     {
         title: "from",
         key: "from"
@@ -56,16 +109,31 @@ const columns = [
         key: "msg"
     },
 ];
-const data = ref([])
+
-const gID = ref('')
+// 凭此code进入群组
-const codeInput = ref('')
+const groupCode = ref('')
+
+// 当前活跃的群组ID
+const activeGID = ref(null)
+
+// 临时生成的key，之后与返回的code结合形成groupCode
 const key = ref('')
+
+// 存储所有消息，通过gID查询一个群组的消息,{msg,from,timestamp}
+const Messages = ref({})
+
+const dataTest = ref([])
+const gID = ref('')
+// const codeInput = ref('')
 const msg = ref('')
-const joinedGroup = []
+
+const joinedGroup = ref([])
+// 由server随机分配uuid
 const uuid = ref('')
 
 
 const gID2key = {}
+
 const options = {
     url: baseUrl,
     pingTimeout: 20000, 
@@ -79,32 +147,42 @@ let socket = new WebsocketHeartbeatJs(options);
 // socket.addEventListener("open", (event) => {
 // //   socket.send("");
 // });
+// setInterval(()=>console.log(activeGID.value),1000)
 
 
 socket.onmessage= (event) => {
     const msg = JSON.parse(event.data)
-    data.value.push({from:'server',msg:event.data})
+    dataTest.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
+                groupCode.value = msg.gID + key.value
+                joinGroup(groupCode.value)
             }else if(type1 === 'joinVerify'){
                 let gID = msg.gID
                 let key = gID2key[gID].key
-                // 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)
+                    joinedGroup.value.push(msg.gID)
+                    Messages.value[msg.gID] = []
+                    if(activeGID.value === null){
+                        activeGID.value = msg.gID
+                    }
                 }
             }else if(type1 === 'history'){
                 let gID = msg.gID
                 let key = gID2key[gID].key
+                Messages.value[msg.gID].length = 0
                 for(let m of JSON.parse(msg.history)){
-                    data.value.push({from:'decrypt',msg:decryptString(key,m.msg)})
+                    Messages.value[msg.gID].push({type:m.type,msg:decryptString(key,m.msg),from:m.from,timestamp:m.timestamp})
+                    dataTest.value.push({from:'decrypt',msg:decryptString(key,m.msg)})
                 }
             }else if(type1 ===  'uuid'){
                 uuid.value = msg.uuid
@@ -112,7 +190,9 @@ socket.onmessage= (event) => {
         }else if(type === 'gMsg'){
             let gID = msg.gID
             let key = gID2key[gID].key
-            data.value.push({from:'decrypt',msg:decryptString(key,msg.msg)})
+            Messages.value[msg.gID].push({type:msg.type,msg:decryptString(key,msg.msg),from:msg.from,timestamp:msg.timestamp})
+            // console.log(Messages.value)
+            dataTest.value.push({from:'decrypt',msg:decryptString(key,msg.msg)})
         }
     }
 };
@@ -123,9 +203,9 @@ socket.onopen = ()=>{
     }else{
         socket.send(JSON.stringify({type:'uuid',type1:'get'}))
     }
-    console.log(joinedGroup)
+    // console.log(joinedGroup)
-    let toJoin = [...joinedGroup]
+    let toJoin = [...joinedGroup.value]
-    joinedGroup.length = 0
+    joinedGroup.value.length = 0
     for(let gID of toJoin){
         let code = gID+gID2key[gID].key
         console.log(code)
@@ -146,7 +226,7 @@ function createGroup(){
 function joinGroup(code){
     var gID = code.substring(0, 8);
     var key = code.substring(8);
-    if(joinedGroup.includes(gID)){
+    if(joinedGroup.value.includes(gID)){
         return
     }
     gID2key[gID] = {}