迁移聊天室前端工具并优化消息渲染

2026-04-25 03:34:31 +08:00
parent e3cba255f9
commit f1d8d20180
12 changed files with 786 additions and 154 deletions
@@ -0,0 +1,63 @@
+// 聊天室消息队列工具，用于后续迁移接收消息、批量渲染和节流刷新逻辑。
+
+/**
+ * 创建可控长度的消息队列。
+ *
+ * @param {{limit?:number, onFlush?:(messages:unknown[])=>void, scheduler?:(callback:()=>void)=>unknown}} options
+ * @returns {{enqueue:(message:unknown)=>number, flush:()=>unknown[], scheduleFlush:()=>void, clear:()=>void, size:()=>number, toArray:()=>unknown[]}}
+ */
+export function createMessageQueue(options = {}) {
+    const limit = Math.max(Number.parseInt(options.limit, 10) || 200, 1);
+    const queue = [];
+    let flushScheduled = false;
+
+    const scheduler = typeof options.scheduler === "function"
+        ? options.scheduler
+        : (callback) => {
+            const requestFrame = globalThis.requestAnimationFrame || ((handler) => globalThis.setTimeout(handler, 16));
+
+            return requestFrame(callback);
+        };
+
+    const flush = () => {
+        flushScheduled = false;
+        const messages = queue.splice(0, queue.length);
+
+        if (messages.length && typeof options.onFlush === "function") {
+            options.onFlush(messages);
+        }
+
+        return messages;
+    };
+
+    return {
+        enqueue(message) {
+            queue.push(message);
+
+            while (queue.length > limit) {
+                queue.shift();
+            }
+
+            return queue.length;
+        },
+        flush,
+        scheduleFlush() {
+            if (flushScheduled) {
+                return;
+            }
+
+            flushScheduled = true;
+            scheduler(flush);
+        },
+        clear() {
+            queue.splice(0, queue.length);
+            flushScheduled = false;
+        },
+        size() {
+            return queue.length;
+        },
+        toArray() {
+            return [...queue];
+        },
+    };
+}