消息同步

src/chat.js

@@ -101,10 +101,10 @@ export default class Chat {
                 color: #888;
             }`
         }, 'style'))
-        this.载入消息()
+        this.从本地载入消息()
         this.挂载全局快捷键()
     }
-    挂载全局快捷键() {
+    async 挂载全局快捷键() {
         document.addEventListener('keydown', event => {
             if (event.key === 'Enter' || event.key === '/') {
                 this.element.style.display = 'block'
@@ -112,6 +112,28 @@ export default class Chat {
             }
         })
     }
+    async 从本地载入消息() {
+        const data = await values(this.store)
+        data.map(item => ({ timestamp: new Date(item.time).getTime(), ...item })).sort((a, b) => a.timestamp - b.timestamp).forEach(item => {
+            this.添加元素(item)
+        })
+    }
+    async 筛选指定范围的消息({ start, end }) {
+        const data = await values(this.store)
+        return data.map(item => ({ timestamp: new Date(item.time).getTime(), ...item })).filter(item => {
+            const timestamp = new Date(item.time).getTime()
+            return timestamp >= start && timestamp <= end
+        })
+    }
+    async 合并消息列表(list) {
+        // 检查本地不存在的id,存储消息
+        const data = await values(this.store)
+        const ids = data.map(item => item.id)
+        list.filter(item => !ids.includes(item.id)).forEach(item => {
+            this.添加元素(item)
+            this.存储消息(item)
+        })
+    }
     // 收到应答(对方确认消息已被接收)
     answer(data) {
         const { name, text, time, type } = data
@@ -170,24 +192,15 @@ export default class Chat {
     存储消息(data) {
         set(data.id, data, this.store)
     }
-    载入消息() {
-        values(this.store).then(items => {
-            items.map(item => {
-                item.timestamp = new Date(item.time).getTime()
-                return item
-            }).sort((a, b) => a.timestamp - b.timestamp).forEach(item => {
-                this.添加元素(item)
-            })
-        })
-    }
     发送消息(text) {
         const name = '我'
         const id = window.crypto.randomUUID()
         const time = new Date().toLocaleString()
         const type = 'text'
-        this.添加元素({ id, name, text, time, type })
+        const data = { id, name, text, time, type }
-        this.存储消息({ id, name, text, time, type })
+        this.添加元素(data)
-        this.send({ id, name, text, time, type })
+        this.存储消息(data)
+        this.send(data)
     }
     收到消息(data) {
         console.log('收到消息', data)

src/main.js

@@ -150,6 +150,10 @@ const chat = new Chat({
 clientList.setChannel('chat', {
   onopen: async event => {
     //console.debug('打开信道', event.target.label)
+    // 请求指定范围内的消息列表
+    const start = new Date().getTime() - 1000 * 60 * 60 * 24 * 7 // 一周内的消息
+    const end = new Date().getTime()
+    clientList.send('chat', JSON.stringify({ type: 'pull', start, end }))
   },
   onmessage: async (event, client) => {
     const data = JSON.parse(event.data)
@@ -163,6 +167,17 @@ clientList.setChannel('chat', {
       chat.answer(data)
       return
     }
+    if (data.type === 'pull') {
+      console.log(client.name, '请求拉取消息:', data)
+      const list = await chat.筛选指定范围的消息({ start: data.start, end: data.end })
+      clientList.sendto(client.id, 'chat', JSON.stringify({ type: 'list', list }))
+      return
+    }
+    if (data.type === 'list') {
+      console.log(client.name, '发来消息列表:', data)
+      chat.合并消息列表(data.list)
+      return
+    }
     console.log('未知类型:', data.type)
   },
   onclose: event => {