使用 idb 简化 indexeddb 操作

README.md

@@ -1,11 +1,7 @@
 # webRTC
 webrtc 实现的 p2p 信道
 
-* 不要将 JS 文件编译, 使用便于阅读的源码发布
-* 避免依赖服务器提供静态文件, 使用WEBRTC在浏览器之间共享
-* 内核策略, 在浏览器中查看和编辑文件
-
-```
+```bash
 # 使用 git 克隆到本地或者直接下载zip压缩包
 git clone git@git.satori.love:LaniakeaSupercluster/webrtc.git
 cd webrtc

public/remove.js

@@ -0,0 +1,5 @@
+import { Chessboard } from './ChineseChess.js'
+
+// 中国象棋
+const chessboard = new Chessboard()
+chessboard.绘制棋盘({比例: 48, 边距: 20})

src/main.js

@@ -1,6 +1,4 @@
-import 'virtual:windi.css'
-
-import IndexedDB from './indexeddb.js'
+import * as idb from 'idb-keyval'
 import MusicList from './music.js'
 import ClientList from './client.js'
 import Chat from './chat.js'
@@ -11,12 +9,6 @@ window.Buffer = Buffer
 window.process = process
 import { parseBlob } from 'music-metadata-browser'
 
-import { Chessboard } from './ChineseChess.js'
-
-// 中国象棋
-const chessboard = new Chessboard()
-chessboard.绘制棋盘({比例: 48, 边距: 20})
-
 // 缓冲分片发送
 const CHUNK_SIZE = 1024 * 64  // 默认每个块的大小为128KB
 const THRESHOLD = 1024 * 1024 // 默认缓冲区的阈值为1MB
@@ -31,11 +23,11 @@ function appendBuffer(buffer1, buffer2) {
 }
 
 // 读取本地音乐列表并标识为缓存状态(本地缓存)
-const database = new IndexedDB('musicDatabase', 1)
-await database.store('musicObjectStore') // 音乐(为什么会用这么丑的格式呢)
+const musicStore = idb.createStore('database', 'music')
 
 // 读取本地音乐列表并标识为缓存状态(本地缓存)
-const list = await Promise.all((await database.getAll('musicObjectStore')).map(async item => {
+const list = await idb.values(musicStore)
+for (const item of list) {
   if (!item.picture && item.picture !== false) {
     console.log('提取封面', item.name)
     const blob = new Blob([item.arrayBuffer], { type: item.type })
@@ -48,10 +40,10 @@ const list = await Promise.all((await database.getAll('musicObjectStore')).map(a
     } else {
       item.picture = false
     }
-    database.put('musicObjectStore', item)
+    idb.set(item.id, item, musicStore)
   }
-  return { save: true, ...item }
-}))
+  item.save = true
+}
 
 // 读取本地用户名(本地缓存)
 const name = localStorage.getItem('username') ?? '匿'
@@ -88,8 +80,7 @@ const musicList = new MusicList({
   onlike: (item, list) => {
     console.log('喜欢音乐', item.name)
     if (item.arrayBuffer) {
-      //musicStore.add(item)
-      database.add('musicObjectStore', item)
+      idb.set(item.id, item, musicStore)
       clientList.send('base', JSON.stringify({
         type: 'set_music_list',
         list: list.map(({ id, name, size, type }) => ({ id, name, size, type }))
@@ -99,8 +90,7 @@ const musicList = new MusicList({
   onunlike: (item, list) => {
     console.log('取消喜欢', item.name)
     if (item.arrayBuffer) {
-      database.delete('musicObjectStore', item.id)
-      //musicStore.delete(item.id)
+      idb.del(item.id, musicStore)
       clientList.send('base', JSON.stringify({
         type: 'set_music_list',
         list: list.map(({ id, name, size, type }) => ({ id, name, size, type }))
@@ -115,8 +105,7 @@ const musicList = new MusicList({
   },
   onremove: item => {
     //console.info('移除音乐', item.name)
-    //musicStore.delete(item.id)
-    database.delete('musicObjectStore', item.id)
+    idb.del(item.id, musicStore)
   },
   onadd: (item, list) => {
     //console.info('添加音乐', item.name)
@@ -173,29 +162,6 @@ const chat = new Chat({
   }
 })
 
-//// 与每个客户端保持心跳
-//clientList.setChannel('ping', {
-//  onopen: async (event, client) => {
-//    console.log('打开信道', event.target.label)
-//    clientList.sendto(client.id, 'ping', JSON.stringify({ type: 'ping' }))
-//  },
-//  onmessage: async (event, client) => {
-//    const data = JSON.parse(event.data)
-//    if (data.type === 'ping') {
-//      console.log(client.name, '心跳:', data)
-//      clientList.sendto(client.id, 'ping', JSON.stringify({ type: 'pong' }))
-//      return
-//    }
-//    if (data.type === 'pong') {
-//      console.log(client.name, '心跳:', data)
-//      await new Promise((resolve) => setTimeout(resolve, 5000))
-//      clientList.sendto(client.id, 'ping', JSON.stringify({ type: 'ping' }))
-//      return
-//    }
-//    console.log('未知类型:', data.type)
-//  }
-//})
-
 // 与每个客户端都建立聊天信道
 clientList.setChannel('chat', {
   onopen: async (event, client) => {

src/music.js

@@ -327,7 +327,7 @@ export default class MusicList {
                 })
             ]
         }))
-        this.event.onadd(item, this.list)
+        this.event.onadd?.(item, this.list)
     }
     async remove(item) {
         this.ul.querySelector(`#${item.id}`)?.remove()