diff --git a/README.md b/README.md index 521b403..d9f5653 100644 --- a/README.md +++ b/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 diff --git a/public/remove.js b/public/remove.js new file mode 100644 index 0000000..f880c28 --- /dev/null +++ b/public/remove.js @@ -0,0 +1,5 @@ +import { Chessboard } from './ChineseChess.js' + +// 中国象棋 +const chessboard = new Chessboard() +chessboard.绘制棋盘({比例: 48, 边距: 20}) \ No newline at end of file diff --git a/src/main.js b/src/main.js index 1c0bf6f..e380fee 100644 --- a/src/main.js +++ b/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) => { diff --git a/src/music.js b/src/music.js index 6b95aed..5bb4403 100644 --- a/src/music.js +++ b/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()