test: 前端日志 用IndexedDB; 解决主线程卡

src/channel/realTimeAPI.js

@@ -2,6 +2,7 @@ import { webSocket } from 'rxjs/webSocket';
 import { of, timer, concatMap, EMPTY, takeWhile, concat } from 'rxjs';
 import { filter, buffer, map, tap, retryWhen, retry, delay, take, catchError } from 'rxjs/operators';
 import { v4 as uuid } from 'uuid';
+import { logWebsocket } from '@/utils/commons';
 
 export class RealTimeAPI {
   constructor(param, onOpenCallback, onCloseCallback, onRetryCallback) {
@@ -104,11 +105,12 @@ export class RealTimeAPI {
   }
 
   sendMessage(messageObject) {
-    console.log(
-      `%c websocket Message OUT ⬆`,
-      'background:#41b883 ; padding: 1px; border-radius: 3px;  color: #fff',
-      JSON.stringify(messageObject),
-    );
+    // console.log(
+    //   `%c websocket Message OUT ⬆`,
+    //   'background:#41b883 ; padding: 1px; border-radius: 3px;  color: #fff',
+    //   JSON.stringify(messageObject, null, 2),
+    // );
+    logWebsocket(messageObject, 'O');
     this.webSocket.next(messageObject);
   }
 

src/stores/ConversationStore.js

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import { RealTimeAPI } from '@/channel/realTimeAPI';
-import { olog, isEmpty, groupBy, sortArrayByOrder } from '@/utils/commons';
+import { olog, isEmpty, groupBy, sortArrayByOrder, logWebsocket } from '@/utils/commons';
 import { receivedMsgTypeMapped, handleNotification } from '@/channel/bubbleMsgUtils';
 import { fetchConversationsList, fetchTemplates, fetchConversationsSearch, UNREAD_MARK, fetchTags } from '@/actions/ConversationActions';
 import { devtools } from 'zustand/middleware';
@@ -154,7 +154,8 @@ const websocketSlice = (set, get) => ({
     }, 500);
   },
   handleMessage: (data) => {
-    olog('websocket Message IN ⬇', JSON.stringify(data));
+    // olog('websocket Message IN ⬇', JSON.stringify(data, null, 2));
+    logWebsocket(data, 'I');
     // olog('websocket Messages ----', data);
     // console.log(data);
     const { updateMessageItem, sentOrReceivedNewMessage, addGlobalNotify } = get();

src/utils/commons.js

@@ -571,3 +571,28 @@ export const TagColorStyle = (tag, outerStyle = false) => {
   const outerStyleObj = outerStyle ? { borderColor: `${color}66`, backgroundColor: `${color}0D` } : {};
   return { color: `${color}`, ...outerStyleObj };
 };
+
+/**
+ *
+ */
+export const logWebsocket = (message, direction) => {
+  var open = indexedDB.open("LogWebsocketData", 1);
+
+  open.onupgradeneeded = function() {
+      var db = open.result;
+      var store = db.createObjectStore("LogStore", {keyPath: "id", autoIncrement: true});
+  };
+
+  open.onsuccess = function() {
+      var db = open.result;
+      var tx = db.transaction("LogStore", "readwrite");
+      var store = tx.objectStore("LogStore");
+
+      // Add a log
+      store.put({direction, message, date: (new Date()).toLocaleString(), });
+
+      tx.oncomplete = function() {
+          db.close();
+      };
+  }
+};