加入 git 地址

替换发送为图标
移除对 indexeddb 的额外封装
2024-09-04 20:15:57 +08:00 · 2024-03-08 14:04:12 +08:00 · 2024-03-08 11:03:09 +08:00 · 2024-03-08 11:02:37 +08:00 · 2023-12-21 13:00:33 +08:00 · 2023-12-21 13:00:01 +08:00
20 changed files with 870 additions and 1060 deletions
--- a/README.md
+++ b/README.md
@@ -1,14 +1,23 @@
 # webRTC
 webrtc 实现的 p2p 信道
-rtc rtc rtc: 稳定, 多重连接
+```bash
-channel channel channel: 细流
+# 使用 git 克隆到本地或者直接下载zip压缩包
-part-server: 调谐, 从不同服务器请求资源分片
+git clone git@git.satori.love:LaniakeaSupercluster/webrtc.git
-webrtc://用户@域名:端口/信道标识/资源ID
+cd webrtc
-封包格式
+# 安装依赖
-资源ID 分片信息(位置) 分片数据
+npm i
 # 编译
 npm run build
 # 运行服务
 npm run start
 # 或者使用 pm2 作为守护进程
 pm2 start npm --name webrtc -- run start
 ```
 插件市场
 1. 从浏览器创建插件(单文件)
@@ -30,28 +39,27 @@ export default class 插件名 {
 聊天室
-1. 每个设备保存全量聊天记录
+- [x] 每个设备保存全量聊天记录
-2. 每个设备各自设定存储区间
+- [x] 每个设备各自设定存储区间
-3. 接入网络后向同频道设备同步区间内记录
+- [x] 接入网络后向同频道设备同步区间内记录
-4. 对方撤回的并不删除, 但不再分发
+- [ ] 对方撤回的并不删除, 但不再分发
-5. 阅后既焚开关, 全频道不保留也不分发记录
+- [ ] 阅后既焚开关, 全频道不保留也不分发记录
-6. mark 标记的记录保留, 其它自动丢弃
+- [ ] mark 标记的记录保留, 其它自动丢弃
 - [ ] 非活跃状态下提示音
 音乐频道
-1. 每个设备存储自己的列表
+- [x] 每个设备存储自己的列表
-2. 可以缓存对方的列表
+- [x] 可以缓存对方的列表
-3. 使用md5验证完整性
+- [ ] 使用md5验证完整性
-4. 可以上传lrc
+- [ ] 可以上传lrc
-5. 可以上传封面, 可以从数据中解析封面
+- [ ] 可以上传封面, 可以从数据中解析封面
-6. ban表匹配时不播放且收起隐藏, 支持正则ban表
+- [ ] ban表匹配时不播放且收起隐藏, 支持正则ban表
-猫窝
+传递资源
-
+1. 每个节点都公开持有的资源列表, 和连接的节点列表
-
+2. 每当资源变动时告知所有连接的节点
-7. 每个节点都公开持有的资源列表, 和连接的节点列表
+3. 与节点创建多个RTC时, 不发送多份, 以ID为准, id随机生成给不同机器, 无法通过ID锁定其它机器
-8. 每当资源变动时告知所有连接的节点
+4. 通过WS交换信息时, ID是否固定? 向WS提供连接?
 9. 与节点创建多个RTC时, 不发送多份, 以ID为准, id随机生成给不同机器, 无法通过ID锁定其它机器
 10. 通过WS交换信息时, ID是否固定? 向WS提供连接?
 - [x] P2P通信
  - [ ] 分离出主要功能, 作为库或桁架使用
@@ -93,7 +101,32 @@ export default class 插件名 {
 ```
 依赖文档
 - https://www.npmjs.com/package/idb-keyval
 - https://www.npmjs.com/package/express
 - https://www.npmjs.com/package/express-ws
 - https://www.npmjs.com/package/node-turn
 - https://www.npmjs.com/package/vite
 备用代码片段
 ```javascript
 // jsmediatags 似乎支持的格式较少, 但不会产生错误警告
 //import jsmediatags from 'jsmediatags/dist/jsmediatags.min.js'
 //list.forEach(async item => {
 //  const blob = new Blob([item.arrayBuffer], { type: item.type })
 //  jsmediatags.read(blob, {
 //    onSuccess: function (tag) {
 //      console.log(tag)
 //      console.log(tag.tags.title)
 //    },
 //    onError: function (error) {
 //      console.log(error);
 //    }
 //  })
 //})
 ```
 ```html
    <script type="module">
--- a/demo.html
+++ b/demo.html
@@ -0,0 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>demo</title>
 </head>
 <body>
    <script type="module">
        import GUN from 'gun'
        import SEA from 'gun/sea'
        const gun = GUN({
            peers: ['http://localhost:8000/gun'],
            localStorage: false
        })
        gun.get('text').once((node) => {
            console.log("Receiving Initial Data")
            console.log(node)
        })
        gun.get('text').put({
            text: 'Hello World'
        })
        gun.get('text').on((node) => {
            console.log("Receiving Update")
            console.log(node)
        })
        document.addEventListener('click', () => {
            gun.get('text').put({
                text: 'Hello World'
            })
        })
    </script>
 </body>
 </html>
--- a/demo.js
+++ b/demo.js
@@ -0,0 +1,12 @@
 import express from 'express'
 import gun from 'gun'
 const app = express()
 const port = 8000
 app.use(gun.serve)
 const server = app.listen(port, () => {
    console.log("Listening at: http://localhost:" + port)
 })
 gun({web: server})
--- a/index.js
+++ b/index.js
@@ -121,11 +121,8 @@ app.ws('/entanglement', (ws, req) => {
 // WEBHOOK 处理 GitHub 事件
 app.post('/webhook', (req, res) => {
    console.log('WEBHOOK:' + new Date().toLocaleString())
-    exec('git pull;npm i;npm run build')
+    exec('git pull;npm i;npm run build;pm2 reload webrtc;')
    return res.json({ success: true })
 })
 // 启动时build
 exec('npm run build')
 app.listen(4096, () => console.log('Server started on port 4096'))
--- a/package.json
+++ b/package.json
@@ -20,9 +20,15 @@
    "windicss": "^3.5.6"
  },
  "dependencies": {
    "buffer": "^6.0.3",
    "express": "^4.18.2",
    "express-ws": "^5.0.2",
    "gun": "^0.2020.1239",
    "iconv-lite": "^0.6.3",
    "iconv-lite-umd": "^0.6.10",
    "idb-keyval": "^6.2.1",
-    "node-turn": "^0.0.6"
+    "music-metadata-browser": "^2.5.10",
    "node-turn": "^0.0.6",
    "process": "^0.11.10"
  }
 }
--- a/public/cloud.html
+++ b/public/cloud.html
@@ -1,119 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>Cloud Upload Icon</title>
    <style>
        #box {
            width: 20rem;
            height: 5rem;
            backdrop-filter: blur(5px);
            background-color: rgb(252, 252, 252);
            border-radius: 1em;
            border: 1px solid rgb(241, 241, 241);
            position: relative;
            user-select: none;
            cursor: pointer;
            margin: 1rem 2rem;
        }
        #box:hover > #drop {
            display: block;
        }
        #cloud {
            width: 82px;
            height: 30px;
            background: #e7f4fd;
            background: -webkit-linear-gradient(top,#e7f4fd 5%,#ceedfd 100%);
            border-radius: 25px;
            position: relative;
            margin: 33px auto 5px;
        }
        #cloud:before {
            width: 45px;
            height: 45px;
            top: -22px;
            right: 12px;
            border-radius: 50px;
        }
        #cloud:after {
            width: 25px;
            height: 25px;
            top: -12px;
            left: 12px;
            border-radius: 25px;
        }
        #cloud:before,
        #cloud:after {
            content: "";
            background: #e7f4fd;
            position: absolute;
            z-index: -1;
        }
        #cloud span {
            width: 87px;
            position: absolute;
            bottom: -2px;
            background: #000;
            z-index: -1;
            box-shadow: 0 0 6px 2px rgba(0,0,0,0.1);
            border-radius: 50%;
        }
        #drop {
            width: 100%;
            color: #999;
            line-height: 5rem;
            text-align: center;
            position: absolute;
            top: 0;
            display: none;
        }
    </style>
    <script>
        onload = () => {
            const file = document.createElement('input')
            file.type = 'file'
            file.onchange = event => {
                for (const i of file.files) {
                    console.log('已获取文件：', i)
                }
                file.value = null
            }
            box.onclick = () => file.click()
            let dragStats = 0
            document.ondragover = e => {
                e.preventDefault()
                if(dragStats) return
                drop.style.display = 'block'
            }
            document.ondragleave = e => {
                e.preventDefault()
                if(dragStats) return
                dragStats = setTimeout(() => {
                    dragStats = 0
                    drop.style.display = ''
                }, 1000)
            }
            document.ondrop = e => {
                e.preventDefault()
                dragStats = 0
                drop.style.display = ''
                const files = e.dataTransfer.files
                for (const i of files) {
                    console.log('已获取文件：', i)
                }
            }
        }
    </script>
 </head>
 <body>
    <div id="box">
        <div id="cloud"><span></span></div>
        <span id="drop">点击或拖拽音乐到此处共享您的音乐</span>
    </div>
 </body>
 </html>
--- a/public/cs.js
+++ b/public/cs.js
@@ -1,36 +0,0 @@
 // 动态分片流
 // 1. 默认提供分片流
 // 2. 允许请求者指定数据段, 返回相应分片, 发送队列可以并行, 接收队列在检查没有新数据时, 补充要求失败的分片
 // 3. 可靠模式下分片是完整的, 但响应不是立即的, 当请求超时时放弃接受和发送队列中的分片
 // 4. 同一个资源可以向不同的提供者请求, 将不同区段的分片合并然后存储
 // 5. 不需要验证hash, 但是需要验证顺序, 发送者应当标记这个分片的开始和结束位置
 // 资源id, 开始位置, 结束位置, 数据
 // 资源的其他信息, 如hash, 大小, 类型等, 由其他方式获取
 // 并不信任发送者, 所以必须验证发送者的分片HASH, 所以资源信息里应当包含每个分片的HASH
 // 但如果每个HASH都要验证, 那么验证的成本太高, 所以应当有一个HASH验证的阈值, 例如每100个分片验证一次, 如果验证失败, 则放弃这个分片, 重新请求
 // 数据块, 每个数据块验证一次HASH, 如果验证失败, 则放弃这个数据块, 重新请求
 // 数据块的大小应当是2的幂, 例如2, 4, 8, 16, 32, 64, 128, 256, 512, 1024等
 // 数据块的大小应当是分片的倍数, 例如分片大小是1024, 那么数据块大小应当是1024的倍数, 例如1024, 2048, 4096等
 /**
 * {
 *   id: 'resource id',
 *   type: 'resource type',
 *   size: 'resource size',
 *   hash: 'resource hash',
 *   blocks: [
 *     'md5 hash of block 1',
 *     'md5 hash of block 2',
 *     'md5 hash of block 3',
 *   ]
 * }
 */
 // 分片交叉验证
 // 1. 每个分片都没有hash
 // 2. 文件有一个完整的hash
 // 3. 文件取4个交叉验证维度
 // 4. 16个HASH验证1GB文件
 // 5. 且只在完整hash验证失败时才验证分片
--- a/public/entanglement.js
+++ b/public/entanglement.js
@@ -1,192 +0,0 @@
 export default class Entanglement {
    constructor({ options }) {
        this.event = {}
        this.options = options
        this.store = {}
        this.users = []
        this.channels = [{ name: 'json' }]
        this.ws = this.__create_websocket()
    }
    async __create_webrtc(user) {
        const pc = new RTCPeerConnection(this.options)
        // 当有新的媒体流加入时触发
        pc.onicecandidate = (event) => {
            if (event.candidate) {
                console.debug(user.name, '发出 candidate 候选通道')
                this.ws.send(JSON.stringify({ type: 'candidate', user, candidate: event.candidate }))
            }
        }
        // 当连接状态发生改变时触发
        pc.oniceconnectionstatechange = (event) => {
            if (pc.iceConnectionState === 'disconnected' || pc.iceConnectionState === 'failed') {
                console.error(user.name, '需要添加新的 candidate')
            } else if (pc.iceConnectionState === 'connected' || pc.iceConnectionState === 'completed') {
                console.debug(user.name, 'WebRTC 连接已经建立成功')
            }
        }
        // 协商新的会话, 建立初始连接或在网络条件发生变化后重新协商连接
        pc.onnegotiationneeded = async (event) => {
            console.log('onnegotiationneeded', event)
            //const offer = await pc.createOffer()
            //await pc.setLocalDescription(offer)
            //this.ws.send(JSON.stringify({ type: 'offer', user, offer }))
        }
        // 当有新的媒体流加入时触发
        pc.ontrack = (event) => {
            console.log('ontrack', event)
        }
        // 当有新的数据通道加入时触发
        pc.ondatachannel = event => {
            console.log(user.name, '建立', event.channel.label, '接收通道')
            event.channel.onmessage = event => {
                console.log(user.name, '发来', event.target.label, '通道消息', event.data)
            }
            event.channel.onopen = () => {
                console.log(user.name, '打开', event.channel.label, '接收通道')
                //event.channel.send(JSON.stringify({ name: 'sato', hello: 'world' }))
            }
            event.channel.onclose = () => {
                console.log(user.name, '关闭', event.channel.label, '接收通道')
            }
            event.channel.onerror = () => {
                console.log(user.name, '通道', event.channel.label, '发生错误')
            }
        }
        // 创建数据通道
        user.channels = this.channels.map(item => {
            const channel = pc.createDataChannel(item.name, { reliable: true })
            channel.onopen = () => {
                console.log('打开数据发送通道')
                channel.send(JSON.stringify({ name: 'sato', hello: 'world' }))
            }
            channel.onmessage = event => {
                console.log('收到数据发送通道消息', event.data)
            }
            channel.onclose = () => {
                console.log('关闭数据发送通道')
            }
            channel.onerror = () => {
                console.log('发送通道发生错误')
            }
            return { channel, ...item }
        })
        return pc
    }
    async __create_websocket() {
        const host = window.location.host
        const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
        const ws = new WebSocket(`${protocol}://${host}/entanglement?name=sato&channel=chat`)
        ws.onopen = async () => {
            console.log('websocket 连接成功')
            if (this.ws instanceof Promise) {
                this.ws = await this.ws
            }
        }
        ws.onclose = async () => {
            console.log('websocket 连接关闭, 3s后尝试重新连接...')
            await new Promise(resolve => setTimeout(resolve, 3000))
            this.ws = await this.__create_websocket()
        }
        ws.onerror = async () => {
            console.log('websocket 连接错误, 3s后尝试重新连接...')
            await new Promise(resolve => setTimeout(resolve, 3000))
            this.ws = await this.__create_websocket()
        }
        ws.onmessage = async event => {
            const data = JSON.parse(event.data)
            if (data.type === 'list') {
                console.debug('收到在线列表', data.list)
                await Promise.all(data.list.map(async user => {
                    console.debug('发送给', user.name, 'offer')
                    const pc = await this.__create_webrtc(user)
                    const offer = await pc.createOffer()
                    await pc.setLocalDescription(offer)
                    this.users.push({ ...user, webrtc: pc }) // 必须在send之前存入
                    this.ws.send(JSON.stringify({ type: 'offer', user, offer }))
                }))
                return
            }
            if (data.type === 'push') {
                console.debug(data.user.name, '上线', data)
                return
            }
            if (data.type === 'pull') {
                console.debug(data.user.name, '下线', data)
                return
            }
            if (data.type === 'offer') {
                console.debug(data.user.name, '发来 offer')
                const pc = await this.__create_webrtc(data.user)
                await pc.setRemoteDescription(data.offer)
                const answer = await pc.createAnswer()
                await pc.setLocalDescription(answer)
                this.ws.send(JSON.stringify({ type: 'answer', user: data.user, answer }))
                this.users.push({ ...data.user, webrtc: pc })
                return
            }
            if (data.type === 'answer') {
                console.debug(data.user.name, '发来 answer')
                const pc = this.users.find(user => user.id === data.user.id).webrtc
                await pc.setRemoteDescription(data.answer)
                return
            }
            if (data.type === 'candidate') {
                console.debug(data.user.name, '发来 candidate 候选通道', JSON.stringify(this.users))
                const pc = this.users.find(user => user.id === data.user.id).webrtc
                await pc.addIceCandidate(data.candidate)
                return
            }
            console.error('收到未知数据:', data)
        }
        return ws
    }
    // 向所有在线的用户广播消息(webrtc)
    send_all(channel_name, data) {
        console.log('向', channel_name, '频道广播消息:', data)
        console.log('在线用户:', this.users)
        this.users.forEach(async user => {
            console.log('向', user.name, '发送', channel_name, '频道消息:', data)
            const ch = user.channels.find(item => item.name === channel_name).channel
            // 等待 datachannel 打开(临时解决方案)
            while (ch.readyState !== 'open') {
                await new Promise(resolve => setTimeout(resolve, 100))
            }
            console.log('完成发送', channel_name, '频道消息:', data)
            ch.send(JSON.stringify(data))
        })
    }
    // 数据被修改时触发
    set(name, data) {
        // 递归创建代理对象
        const useProxy = (obj, path = []) => {
            const proxy = new Proxy(obj, {
                set: (target, key, value) => {
                    if (!Array.isArray(target) || key !== 'length') {
                        console.log('对象被修改', [...path, key], value)
                        this.send_all(name, { key: [...path, key], value }) // 向所有在线的用户广播消息
                    }
                    return Reflect.set(target, key, value)
                },
                get: (target, key) => {
                    return target[key]
                }
            })
            Object.keys(obj).forEach(key => {
                if (typeof obj[key] === 'object') {
                    obj[key] = useProxy(obj[key], [...path, key])
                }
            })
            return proxy
        }
        return Reflect.set(this.store, name, useProxy(data))
    }
    // 读取一个通道
    get(name) {
        return this.store[name]
    }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -1,266 +0,0 @@
 <!DOCTYPE html>
 <html lang="zh">
 <head>
    <meta charset="UTF-8">
    <title>webRTC</title>
 </head>
 <body>
    <div>
        <h1>webRTC</h1>
        <p>选择音乐使频道内所有设备同步播放 chrome://webrtc-internals/</p>
    </div>
    <script type="module">
        import IndexedDB from './database.js'
        import MusicList from './music.js'
        import ClientList from './client.js'
        // 缓冲分片发送
        const CHUNK_SIZE = 1024 * 64  // 默认每个块的大小为128KB
        const THRESHOLD = 1024 * 1024 // 默认缓冲区的阈值为1MB
        const DELAY = 50              // 默认延迟500ms
        // 将两个ArrayBuffer合并成一个
        function appendBuffer(buffer1, buffer2) {
            const tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength)
            tmp.set(new Uint8Array(buffer1), 0)
            tmp.set(new Uint8Array(buffer2), buffer1.byteLength)
            return tmp.buffer
        }
        // 读取本地图像
        const imageStore = new IndexedDB('musicDatabase', 1, 'imageObjectStore')
        await imageStore.open()
        // 读取本地音乐列表并标识为缓存状态(本地缓存)
        const musicStore = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
        await musicStore.open()
        const list = (await musicStore.getAll()).map(item => {
            return { save: true, ...item }
        })
        // 读取本地用户名(本地缓存)
        const name = localStorage.getItem('username') ?? '游客'
        const avatar = localStorage.getItem('avatar') ?? '/favicon.ico'
        // 初始化客户端列表
        const clientList = new ClientList({
            name,
            onexit: async client => {
                console.log(client.name, '离开频道', client)
                // 从列表中移除未缓存的此用户的音乐, 但可能多人都有此音乐且未缓存
                // 因此每条音乐都要检查是否有其他用户也有此音乐, 如果有则不移除
                const 此用户音乐 = client.musicList?.map(item => item.id) || []
                const 无数据音乐 = musicList.list.filter(item => !item.arrayBuffer).filter(item => {
                    return 此用户音乐.includes(item.id)
                })
                无数据音乐.forEach(item => {
                    const client = clientList.clientlist.find(client => {
                        return client.musicList.find(x => x.id === item.id)
                    })
                    if (!client) musicList.remove(item)
                })
            }
        })
        // 初始化音乐列表(加入本地缓存)
        const musicList = new MusicList({
            list,
            onplay: item => {
                console.log('播放音乐', item.name)
            },
            onstop: item => {
                console.log('停止音乐', item?.name)
            },
            onlike: (item, list) => {
                console.log('喜欢音乐', item.name)
                if (item.arrayBuffer) {
                    musicStore.add(item)
                    clientList.send('base', JSON.stringify({
                        type: 'set_music_list',
                        list: list.map(({ id, name, size, type }) => ({ id, name, size, type }))
                    }))
                }
            },
            onunlike: (item, list) => {
                console.log('取消喜欢', item.name)
                if (item.arrayBuffer) {
                    musicStore.delete(item.id)
                    clientList.send('base', JSON.stringify({
                        type: 'set_music_list',
                        list: list.map(({ id, name, size, type }) => ({ id, name, size, type }))
                    }))
                }
            },
            onban: item => {
                console.info('禁止音乐', item.name)
            },
            onunban: item => {
                console.info('解禁音乐', item.name)
            },
            onremove: item => {
                console.info('移除音乐', item.name)
                musicStore.delete(item.id)
            },
            onadd: (item, list) => {
                console.info('添加音乐', item.name)
            },
            onupdate: item => {
                console.info('更新音乐', item.name)
                musicStore.put(item)
            },
            onerror: error => {
                console.error('音乐列表错误', error)
            },
            onload: async item => {
                console.info('加载音乐', item)
                return await new Promise((resolve) => {
                    var buffer = new ArrayBuffer(0) // 接收音乐数据
                    var count = 0                   // 接收分片计数
                    const chunkNumber = Math.ceil(item.size / 1024 / 64) // 64KB每片
                    clientList.setChannel(`music-data-${item.id}`, {
                        onmessage: async (event, client) => {
                            console.log('收到音乐数据 chunk', `${count + 1}/${chunkNumber}`, buffer.byteLength)
                            buffer = appendBuffer(buffer, event.data) // 合并分片准备存储
                            item.arrayBufferChunks?.push(event.data)  // 保存分片给边下边播
                            count++
                            if (buffer.byteLength >= item.size) {
                                console.log('音乐数据接收完毕')
                                item.arrayBuffer = buffer
                                event.target.close() // 关闭信道
                                resolve(item)
                            }
                        }
                    })
                    const client = clientList.clientlist.find(client => {
                        return client.musicList.find(x => x.id === item.id)
                    })
                    console.info('向', client.name, '请求音乐数据')
                    const c = Math.ceil(item.size / CHUNK_SIZE)
                    console.log('需要接收', c, '个分片')
                    clientList.sendto(client.id, 'base', JSON.stringify({
                        type: 'get_music_data', id: item.id, channel: `music-data-${item.id}`
                    }))
                })
            }
        })
        const ImageList = []
        // 只有一个基本信道, 用于交换和调度信息
        clientList.setChannel('base', {
            onopen: async event => {
                //console.debug('打开信道', event.target.label, '广播请求音乐列表和身份信息')
                clientList.send('base', JSON.stringify({ type: 'get_music_list' }))   // 要求对方发送音乐列表
                clientList.send('base', JSON.stringify({ type: 'get_user_profile' })) // 要求对方发送身份信息
            },
            onmessage: async (event, client) => {
                const data = JSON.parse(event.data)
                if (data.type === 'get_user_profile') {
                    console.log(client.name, '请求身份信息:', data)
                    // 包过大会导致发送失败, 因此需要分开发送
                    clientList.sendto(client.id, 'base', JSON.stringify({
                        type: 'set_user_profile',
                        name: name,
                        avatar: avatar,
                    }))
                    return
                }
                if (data.type === 'set_user_profile') {
                    console.log(client.name, '发来身份信息:', data)
                    console.log('将身份信息保存到本机记录:', client)
                    client.name = data.name
                    client.avatar = data.avatar
                    // 还需要更新组件的用户信息
                    console.log('更新组件的用户信息:', data, client)
                    clientList.setAvatar({ id:client.id, ...data })
                    return
                }
                if (data.type === 'get_image_list') {
                    // webrtc://用户@域名:端口/信道标识/资源ID
                }
                if (data.type === 'get_music_list') {
                    const ms = musicList.list.filter(item => item.arrayBuffer)
                    console.log(client.name, '请求音乐列表:', ms)
                    clientList.sendto(client.id, 'base', JSON.stringify({
                        type: 'set_music_list',
                        list: ms.map(({ id, name, size, type }) => ({ id, name, size, type }))
                    }))
                    return
                }
                if (data.type === 'set_music_list') {
                    console.log(client.name, '发来音乐列表:', `x${JSON.parse(event.data).list.length}`)
                    client.musicList = data.list
                    client.musicList.forEach(music => musicList.add(music))
                    return
                }
                if (data.type === 'get_music_data') {
                    // 建立一个信道, 用于传输音乐数据(接收方已经准备好摘要信息)
                    console.log(client.name, '建立一个信道, 用于传输音乐数据', musicList.list)
                    musicList.list.filter(item => item.id === data.id).forEach(item => {
                        const ch = client.webrtc.createDataChannel(data.channel, { reliable: true })
                        ch.onopen = async event => {
                            console.log(client.name, `打开 ${data.channel} 信道传输音乐数据`, item.name)
                            // 将音乐数据分成多个小块，并逐个发送
                            async function sendChunk(dataChannel, data, index = 0, buffer = new ArrayBuffer(0)) {
                                while (index < data.byteLength) {
                                    if (dataChannel.bufferedAmount <= THRESHOLD) {
                                        const chunk = data.slice(index, index + CHUNK_SIZE)
                                        dataChannel.send(chunk)
                                        index += CHUNK_SIZE
                                        buffer = appendBuffer(buffer, chunk)
                                    }
                                    await new Promise((resolve) => setTimeout(resolve, DELAY))
                                }
                                return buffer
                            }
                            await sendChunk(ch, item.arrayBuffer)
                            console.log(client.name, `获取 ${data.channel} 信道数据结束`, item.name)
                            ch.close() // 关闭信道
                        }
                    })
                    return
                }
                console.log('未知类型:', data.type)
            },
            onclose: event => {
                console.log('关闭信道', event.target.label)
            },
            onerror: event => {
                console.error('信道错误', event.target.label, event.error)
            }
        })
        // 延迟1500ms
        //await new Promise((resolve) => setTimeout(resolve, 100))
        // 设置自己的主机名
        const nameInput = document.createElement('input')
        nameInput.type = 'text'
        nameInput.placeholder = '请设置你的昵称'
        nameInput.value = name
        nameInput.onchange = event => {
            localStorage.setItem('username', event.target.value)
            window.location.reload() // 简单刷新页面
        }
        document.body.appendChild(nameInput)
        // 设置标签为自己的头像
        if (localStorage.getItem('avatar')) {
            const favicon = document.createElement('link')
            favicon.rel = 'icon'
            favicon.href = localStorage.getItem('avatar')
            document.head.appendChild(favicon)
        }
        // 设置标题为自己的昵称
        if (localStorage.getItem('username')) {
            document.title = localStorage.getItem('username')
        }
    </script>
 </body>
 </html>
--- a/public/remove.js
+++ b/public/remove.js
@@ -0,0 +1,5 @@
 import { Chessboard } from './ChineseChess.js'
 // 中国象棋
 const chessboard = new Chessboard()
 chessboard.绘制棋盘({比例: 48, 边距: 20})
--- a/public/send.svg
+++ b/public/send.svg
@@ -0,0 +1,13 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 	 viewBox="0 0 495.003 495.003" xml:space="preserve">
 <g id="XMLID_51_">
 	<path id="XMLID_53_" d="M164.711,456.687c0,2.966,1.647,5.686,4.266,7.072c2.617,1.385,5.799,1.207,8.245-0.468l55.09-37.616
 		l-67.6-32.22V456.687z"/>
 	<path id="XMLID_52_" d="M492.431,32.443c-1.513-1.395-3.466-2.125-5.44-2.125c-1.19,0-2.377,0.264-3.5,0.816L7.905,264.422
 		c-4.861,2.389-7.937,7.353-7.904,12.783c0.033,5.423,3.161,10.353,8.057,12.689l125.342,59.724l250.62-205.99L164.455,364.414
 		l156.145,74.4c1.918,0.919,4.012,1.376,6.084,1.376c1.768,0,3.519-0.322,5.186-0.977c3.637-1.438,6.527-4.318,7.97-7.956
 		L494.436,41.257C495.66,38.188,494.862,34.679,492.431,32.443z"/>
 </g>
 </svg>
--- a/public/test.html
+++ b/public/test.html
@@ -1,94 +0,0 @@
 <!DOCTYPE html>
 <html lang="zh">
 <head>
    <meta charset="UTF-8">
    <title>webRTC</title>
 </head>
 <body>
    <div>
        <h1>Entanglement</h1>
        <p>同步</p>
    </div>
    <script type="module">
        import { List, ListItem, useProxy } from './weigets.js'
        //import Entanglement from './entanglement.js'
        //const entanglement = new Entanglement({
        //    options: {
        //        iceServers: [
        //            {
        //                urls: 'turn:satori.love:3478?transport=udp',
        //                username: 'x-username',
        //                credential: 'x-password'
        //            },
        //            {
        //                urls: [
        //                    'stun:stun.1und1.de',
        //                    'stun:stun.callwithus.com',
        //                    'stun:stun.ekiga.net',
        //                    'stun:stun.fwdnet.net',
        //                    'stun:stun.fwdnet.net:3478',
        //                    'stun:stun.gmx.net',
        //                    'stun:stun.iptel.org',
        //                    'stun:stun.internetcalls.com',
        //                    'stun:stun.minisipserver.com',
        //                    'stun:stun.schlund.de',
        //                    'stun:stun.sipgate.net',
        //                    'stun:stun.sipgate.net:10000',
        //                    'stun:stun.softjoys.com',
        //                    'stun:stun.softjoys.com:3478',
        //                    'stun:stun.voip.aebc.com',
        //                    'stun:stun.voipbuster.com',
        //                    'stun:stun.voipstunt.com',
        //                    'stun:stun.voxgratia.org',
        //                    'stun:stun.wirlab.net',
        //                    'stun:stun.xten.com',
        //                    'stun:stunserver.org',
        //                    'stun:stun01.sipphone.com',
        //                    'stun:stun.zoiper.com'
        //                ]
        //            }
        //        ],
        //        iceCandidatePoolSize: 10,  // 限制 ICE 候选者的数量
        //        iceTransportPolicy: 'all', // 使用所有可用的候选者
        //        bundlePolicy: 'balanced',  // 每種類型的內容建立一個單獨的傳輸
        //    }, server: {}
        //})
        //entanglement.set('json', {
        //    users: { name: 'users', list: [{ name: 'satori' }] },
        //    music: { name: 'music', list: [{ name: 'satori' }] },
        //    image: { name: 'image', list: [{ name: 'satori' }] }
        //})
        //await new Promise(resolve => setTimeout(resolve, 3000))
        const store = useProxy({
            users: { name: 'users', list: [{ name: 'satori' },{ name: 'sato' }] },
            music: { name: 'music', list: [{ name: 'satori' },{ name: 'sato' }] },
            image: { name: 'image', list: [{ name: 'satori' },{ name: 'sato' }] },
        }, data => {
            //console.log('触发了:', data.key, data.value)
            console.log('当前数据:', store)
        })
        //console.log('当前数据:', JSON.stringify(store))
        delete store.users.list[1]
        //console.log('当前数据:', JSON.stringify(store))
        store.users.list.push({ name: 'koishi' })
        //store.users.list.push({ name: 'koishi' })
        //store.users.list.push({ name: 'koishi' })
        //console.log('当前数据:', JSON.stringify(store))
        //document.body.appendChild(List({
        //    children: store.users.list.map(user => ListItem({ textContent: user.name })),
        //    onclick: () => {
        //        if (event.target.tagName === 'LI') {
        //            console.log('点击了:', event.target.textContent)
        //        }
        //        //store.users.name = 'koishi'
        //        store.users.list.push({ name: 'koishi' })
        //        //store.users.list.pop()
        //        // 在数据从其他位置被删除时也能删除这里的元素
        //    }
        //}))
    </script>
 </body>
 </html>
--- a/src/ChineseChess.js
+++ b/src/ChineseChess.js
@@ -0,0 +1,228 @@
 import { createElement } from './weigets.js';
 // 棋子
 class Chessman {
    constructor(color) {
        this.color = color;
        this.name = '';
        this.position = '';
        this.status = '';
        this.move = '';
        this.rule = '';
        this.display = '';
        this.operation = '';
    }
    // 绘制棋子
    draw() {
        const chessman = createElement({
            style: {
                backgroundColor: this.color,
            },
        });
    }
 }
 // 单独绘制棋盘
 export function 棋盘(比例, 边距, 背景色 = '#ffeedd', 线条色 = '#784518', 线条宽度 = 2) {
    const 宽度 = (比例 * 8) + (边距 * 2)
    const 高度 = (比例 * 9) + (边距 * 2)
    const 画布 = createElement({ width: 宽度, height: 高度 }, 'canvas')
    const ctx = 画布.getContext('2d')
    ctx.strokeStyle = 线条色
    ctx.lineWidth = 线条宽度
    // 横线竖线
    for (let i = 0; i < 10; i++) {
        ctx.moveTo(边距, 比例 * i + 边距)
        ctx.lineTo(比例 * 8 + 边距, 比例 * i + 边距)
        ctx.moveTo(比例 * i + 边距, 边距)
        ctx.lineTo(比例 * i + 边距, 比例 * 9 + 边距)
    }
    画布.style.backgroundColor = 背景色
    document.body.appendChild(画布)
 }
 // 棋盘
 export class Chessboard {
    constructor() {
        this.position = '';
        this.move = '';
        this.rule = '';
        this.display = '';
        this.operation = '';
    }
    // 初始化绘制棋盘
    绘制棋盘({ 比例, 边距, 背景色 = '#ffeedd', 线条色 = '#784518', 线条宽度 = 2 }) {
        const 宽度 = (比例 * 8) + (边距 * 2)
        const 高度 = (比例 * 9) + (边距 * 2)
        const canvas = createElement({ width: 宽度, height: 高度 }, 'canvas')
        const context = canvas.getContext('2d')
        context.strokeStyle = 线条色
        context.lineWidth = 线条宽度
        // 横线竖线
        for (let i = 0; i < 5; i++) {
            context.moveTo(0, 比例 * i)
            context.lineTo(比例 * 4, 比例 * i)
            context.moveTo(比例 * i, 比例 * 0)
            context.lineTo(比例 * i, 比例 * 4)
        }
        // 斜线
        context.moveTo(比例 * 3, 比例 * 0)
        context.lineTo(比例 * 4, 比例 * 1)
        context.moveTo(比例 * 4, 比例 * 1)
        context.lineTo(比例 * 3, 比例 * 2)
        // 炮位置
        context.moveTo(比例 * 1 - 4, 比例 * 2 - 9)
        context.lineTo(比例 * 1 - 4, 比例 * 2 - 4)
        context.lineTo(比例 * 1 - 9, 比例 * 2 - 4)
        context.moveTo(比例 * 1 + 4, 比例 * 2 - 9)
        context.lineTo(比例 * 1 + 4, 比例 * 2 - 4)
        context.lineTo(比例 * 1 + 9, 比例 * 2 - 4)
        context.moveTo(比例 * 1 - 4, 比例 * 2 + 9)
        context.lineTo(比例 * 1 - 4, 比例 * 2 + 4)
        context.lineTo(比例 * 1 - 9, 比例 * 2 + 4)
        context.moveTo(比例 * 1 + 4, 比例 * 2 + 9)
        context.lineTo(比例 * 1 + 4, 比例 * 2 + 4)
        context.lineTo(比例 * 1 + 9, 比例 * 2 + 4)
        // 兵位置
        context.moveTo(比例 * 0 - 4, 比例 * 3 - 9)
        context.lineTo(比例 * 0 - 4, 比例 * 3 - 4)
        context.lineTo(比例 * 0 - 9, 比例 * 3 - 4)
        context.moveTo(比例 * 0 + 4, 比例 * 3 - 9)
        context.lineTo(比例 * 0 + 4, 比例 * 3 - 4)
        context.lineTo(比例 * 0 + 9, 比例 * 3 - 4)
        context.moveTo(比例 * 2 - 4, 比例 * 3 - 9)
        context.lineTo(比例 * 2 - 4, 比例 * 3 - 4)
        context.lineTo(比例 * 2 - 9, 比例 * 3 - 4)
        context.moveTo(比例 * 2 + 4, 比例 * 3 - 9)
        context.lineTo(比例 * 2 + 4, 比例 * 3 - 4)
        context.lineTo(比例 * 2 + 9, 比例 * 3 - 4)
        context.moveTo(比例 * 4 - 4, 比例 * 3 - 9)
        context.lineTo(比例 * 4 - 4, 比例 * 3 - 4)
        context.lineTo(比例 * 4 - 9, 比例 * 3 - 4)
        // 兵位置向上镜像
        context.moveTo(比例 * 0 - 4, 比例 * 3 + 9)
        context.lineTo(比例 * 0 - 4, 比例 * 3 + 4)
        context.lineTo(比例 * 0 - 9, 比例 * 3 + 4)
        context.moveTo(比例 * 0 + 4, 比例 * 3 + 9)
        context.lineTo(比例 * 0 + 4, 比例 * 3 + 4)
        context.lineTo(比例 * 0 + 9, 比例 * 3 + 4)
        context.moveTo(比例 * 2 - 4, 比例 * 3 + 9)
        context.lineTo(比例 * 2 - 4, 比例 * 3 + 4)
        context.lineTo(比例 * 2 - 9, 比例 * 3 + 4)
        context.moveTo(比例 * 2 + 4, 比例 * 3 + 9)
        context.lineTo(比例 * 2 + 4, 比例 * 3 + 4)
        context.lineTo(比例 * 2 + 9, 比例 * 3 + 4)
        context.moveTo(比例 * 4 - 4, 比例 * 3 + 9)
        context.lineTo(比例 * 4 - 4, 比例 * 3 + 4)
        context.lineTo(比例 * 4 - 9, 比例 * 3 + 4)
        // 描绘线条
        context.stroke()
        context.save()                                                             // 保存当前状态
        context.translate(0, 0)                                                    // 移动到要镜像的区域
        context.scale(-1, 1)                                                       // X轴镜像
        context.drawImage(canvas, 0, 0, 比例 * 4, 比例 * 8, -(比例 * 8), 0, 比例 * 4, 比例 * 8) // 将左上角的区域复制并镜像到右上角
        context.restore()                                                          // 恢复到上次保存的状态
        context.save()                                                             // 保存当前状态
        context.translate(0, 0)                                                    // 移动到要镜像的区域
        context.scale(1, -1)                                                       // Y轴镜像
        context.drawImage(canvas, 0, 0, 比例 * 8, 比例 * 4 + (线条宽度 / 2), 0, -(比例 * 9), 比例 * 8, 比例 * 4 + (线条宽度 / 2)) // 将上半部分镜像到下半部分
        context.restore()                                                          // 恢复到上次保存的状态
        // 河界
        context.font = `${比例 / 2.4}px serif`
        context.fillStyle = '#784518'
        context.fillText('楚', 比例 * 1.5, 比例 * 4.65)
        context.fillText('河', 比例 * 2.5, 比例 * 4.65)
        context.fillText('漢', 比例 * 5.5, 比例 * 4.65)
        context.fillText('界', 比例 * 6.5, 比例 * 4.65)
        var img = new Image()
        img.onload = () => {
            context.clearRect(0, 0, canvas.width, canvas.height)
            context.drawImage(img, 边距, 边距)
            context.beginPath() // 重新描绘线条
            // 棋盘描边
            context.moveTo(边距, 边距)
            context.lineTo(边距, 边距 + (比例 * 9))
            context.lineTo(边距 + (比例 * 8), 边距 + (比例 * 9))
            context.lineTo(边距 + (比例 * 8), 边距)
            context.lineTo(边距, 边距)
            context.stroke()
            // 单独保存绘制好的棋盘
            const chessboard = canvas.toDataURL()
            // 红方棋子
            this.drawChessman({context, name:'車', color:'#cc1414', position:{x:0, y:0}, 边距, 比例})
            this.drawChessman({context, name:'馬', color:'#cc1414', position:{x:1, y:0}, 边距, 比例})
            this.drawChessman({context, name:'相', color:'#cc1414', position:{x:2, y:0}, 边距, 比例})
            this.drawChessman({context, name:'仕', color:'#cc1414', position:{x:3, y:0}, 边距, 比例})
            this.drawChessman({context, name:'将', color:'#cc1414', position:{x:4, y:0}, 边距, 比例})
            this.drawChessman({context, name:'仕', color:'#cc1414', position:{x:5, y:0}, 边距, 比例})
            this.drawChessman({context, name:'相', color:'#cc1414', position:{x:6, y:0}, 边距, 比例})
            this.drawChessman({context, name:'馬', color:'#cc1414', position:{x:7, y:0}, 边距, 比例})
            this.drawChessman({context, name:'車', color:'#cc1414', position:{x:8, y:0}, 边距, 比例})
            this.drawChessman({context, name:'砲', color:'#cc1414', position:{x:1, y:2}, 边距, 比例})
            this.drawChessman({context, name:'砲', color:'#cc1414', position:{x:7, y:2}, 边距, 比例})
            this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:0, y:3}, 边距, 比例})
            this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:2, y:3}, 边距, 比例})
            this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:4, y:3}, 边距, 比例})
            this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:6, y:3}, 边距, 比例})
            this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:8, y:3}, 边距, 比例})
            // 绿方棋子
            this.drawChessman({context, name:'車', color:'#14cc14', position:{x:0, y:9}, 边距, 比例})
            this.drawChessman({context, name:'馬', color:'#14cc14', position:{x:1, y:9}, 边距, 比例})
            this.drawChessman({context, name:'象', color:'#14cc14', position:{x:2, y:9}, 边距, 比例})
            this.drawChessman({context, name:'士', color:'#14cc14', position:{x:3, y:9}, 边距, 比例})
            this.drawChessman({context, name:'帥', color:'#14cc14', position:{x:4, y:9}, 边距, 比例})
            this.drawChessman({context, name:'士', color:'#14cc14', position:{x:5, y:9}, 边距, 比例})
            this.drawChessman({context, name:'象', color:'#14cc14', position:{x:6, y:9}, 边距, 比例})
            this.drawChessman({context, name:'馬', color:'#14cc14', position:{x:7, y:9}, 边距, 比例})
            this.drawChessman({context, name:'車', color:'#14cc14', position:{x:8, y:9}, 边距, 比例})
            this.drawChessman({context, name:'炮', color:'#14cc14', position:{x:1, y:7}, 边距, 比例})
            this.drawChessman({context, name:'炮', color:'#14cc14', position:{x:7, y:7}, 边距, 比例})
            this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:0, y:6}, 边距, 比例})
            this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:2, y:6}, 边距, 比例})
            this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:4, y:6}, 边距, 比例})
            this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:6, y:6}, 边距, 比例})
            this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:8, y:6}, 边距, 比例})
        }
        img.src = canvas.toDataURL()
        canvas.style.backgroundColor = '#ffeedd'
        canvas.style.margin = '1rem'
        document.body.appendChild(canvas)
    }
    // canvas绘制棋子
    drawChessman({context, name, color, position = { x: 0, y: 0 }, 边距, 比例}) {
        // 先画圆形象棋子
        context.beginPath()
        context.arc(边距+(比例*position.x), 边距+(比例*position.y), 比例/3, 0, 2*Math.PI)
        context.fillStyle = '#ffeedd'
        context.fill()
        context.stroke()
        // 再画文字
        context.font = '20px serif'
        context.fillStyle = color
        context.fillText(name, 边距+(比例*position.x)-(比例/5), 20+边距-(比例/4) + (比例*position.y))
        context.stroke()
    }
 }
 export default { Chessboard, Chessman }
--- a/src/chat.js
+++ b/src/chat.js
@@ -41,6 +41,7 @@ export default class Chat {
                                boxShadow: '0 0 1rem #eee',
                                border: 'none',
                                outline: 'none',
                                borderRadius: '2rem'
                            },
                            onkeydown: event => {
                                event.stopPropagation()
@@ -79,7 +80,6 @@ export default class Chat {
                            }
                        }),
                        Button({
                            textContent: '发送(Enter)',
                            onclick: event => {
                                const text = event.target.previousSibling.value.trim()
                                if (text) {
@@ -88,10 +88,11 @@ export default class Chat {
                                }
                            },
                            style: {
-                                padding: '.5rem 1rem',
+                                width: '1.2rem',
-                                boxSizing: 'border-box',
+                                height: '1.2rem',
-                                boxShadow: '0 0 1rem #eee',
+                                border: 'none',
-                                borderRadius: '1rem',
+                                background: 'url("/send.svg") no-repeat center / cover',
                                margin: 'auto 0 auto -2.6rem'
                            }
                        }),
                    ]
@@ -101,6 +102,12 @@ export default class Chat {
        document.body.appendChild(this.element)
        document.head.appendChild(createElement({
            innerText: `
            ul.chat-list::-webkit-scrollbar {
                display: none;
            }
            ul.chat-list {
                scrollbar-width: none;
            }
            ul.chat-list {
                max-height: 70vh;
                overflow-y: auto;
@@ -122,6 +129,44 @@ export default class Chat {
        }, 'style'))
        this.从本地载入消息()
        this.挂载全局快捷键()
        // 如果未询问用户是否允许通知,则询问用户是否允许通知
        if (Notification.permission === 'default') {
            Notification.requestPermission()
        }
    }
    async 播放提示音() {
        // 如果页面可见或且浏览器不在前台运行
        //if (document.visibilityState === 'visible') return console.log('页面可见')
        // 创建一个MIDI的清脆的"叮咚"
        const context = new AudioContext()
        const o = context.createOscillator()
        const g = context.createGain()
        o.connect(g)
        o.type = 'sine'
        o.frequency.value = 400
        g.connect(context.destination)
        o.start(0)
        g.gain.exponentialRampToValueAtTime(0.00001, context.currentTime + 1)
    }
    async 通知栏消息(data) {
        console.log('通知栏消息', data)
        const { name, text, avatar } = data
        // 如果页面可见或且浏览器不在前台运行, 则发送通知
        if (document.visibilityState === 'visible') return console.log('页面可见')
        // 如果用户不允许通知,则不发送通知
        if (Notification.permission !== 'granted') return console.log('用户不允许通知')
        // 如果未询问用户是否允许通知,则询问用户是否允许通知
        if (Notification.permission === 'default') {
            await Notification.requestPermission()
        }
        if (Notification.permission === 'granted') {
            const notification = new Notification(name, { body: text, icon: avatar })
            notification.onclick = () => {
                window.focus()
                notification.close()
            }
        }
    }
    async 挂载全局快捷键() {
        document.addEventListener('keydown', event => {
@@ -133,15 +178,17 @@ 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 => {
+        data.map(item => ({ timestamp: new Date(item.time).getTime(), ...item }))
-            this.添加元素(item)
+            .filter(item => !item.ban)
-        })
+            .sort((a, b) => a.timestamp - b.timestamp).forEach(item => {
                this.添加元素(item, true)
            })
    }
    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
+            return timestamp >= start && timestamp <= end && !item.ban
        })
    }
    // 检查本地不存在的id,存储消息
@@ -161,6 +208,15 @@ export default class Chat {
    }
    // 添加一条消息
    add({ name, text, time, type }) {
        // 如果和上一条消息是同一人, 且时间间隔小于1小时, 则向上合并
        //  && new Date(time).getTime() - new Date(this.last.time).getTime() < 1000 * 60 * 60
        console.log('添加一条消息', this.last, name, text, time, type)
        if (this.last && this.last.name === name) {
            this.last.item.appendChild(Span({ textContent: text }))
            this.last = { name, text, time, type, item: this.last.item }
            return this.last.item
        }
        const item = ListItem({
            classList: [type],
            children: [
@@ -169,6 +225,9 @@ export default class Chat {
        })
        this.ul.appendChild(item)
        this.ul.scrollTop = this.ul.scrollHeight
        // 记录到上一条消息
        this.last = { name, text, time, type, item }
        return item
    }
    send(text) {
@@ -176,37 +235,136 @@ export default class Chat {
            this.event.onsend(text)
        }
    }
-    添加元素(data) {
+    添加元素(data, local) {
        // 人类可读的时间: 今天,昨天, 空字符串
        function convertTimestampToReadableTime(timestamp) {
            const date = new Date(timestamp);
            const today = new Date();
            const yesterday = new Date(today);
            yesterday.setDate(today.getDate() - 1);
            if (date.toDateString() === today.toDateString()) {
                return '今天';
            } else if (date.toDateString() === yesterday.toDateString()) {
                return '昨天';
            } else {
                return '';
            }
        }
        // 如果上一条日期不等于这一条日期,则添加日期(只计算日期,不计算时间)
        if (!this.last || this.last.time.split(' ')[0] !== data.time.split(' ')[0]) {
            this.ul.appendChild(ListItem({
                style: { listStyle: 'none', maxWidth: '24rem', textAlign: 'center' },
                children: [
                    Span({
                        style: {
                            display: 'inline-block',
                            padding: '.1rem .5rem',
                            marginTop: '2rem',
                            boxSizing: 'border-box',
                            boxShadow: '0 0 1rem #eee',
                            borderRadius: '1rem',
                            fontSize: '12px',
                        },
                        textContent: `${data.time.split(' ')[0]} ${convertTimestampToReadableTime(new Date(data.time).getTime())}`
                    })
                ]
            }))
        }
        //// 将时间转换为人类可读的格式: 如果是今天,则显示时间,如果是昨天,则显示昨天,如果是今年,则显示月日,如果是去年,则显示年月日
        //const redate = (str) => {
        //    const date = new Date(str)
        //    const now = new Date()
        //    const year = date.getFullYear()
        //    const month = date.getMonth() + 1
        //    const day = date.getDate()
        //    const hour = date.getHours()
        //    const minute = date.getMinutes()
        //    const nowYear = now.getFullYear()
        //    const nowMonth = now.getMonth() + 1
        //    const nowDay = now.getDate()
        //    if (year === nowYear && month === nowMonth && day === nowDay) {
        //        return `${hour}:${minute}`
        //    }
        //    if (year === nowYear && month === nowMonth && day === nowDay - 1) {
        //        return `昨天 ${hour}:${minute}`
        //    }
        //    if (year === nowYear) {
        //        return `${month}月${day}日 ${hour}:${minute}`
        //    }
        //    return `${year}年${month}月${day}日 ${hour}:${minute}`
        //}
        const scroll = this.ul.scrollHeight === this.ul.clientHeight + this.ul.scrollTop
        // 如果和上一条消息是同一人, 且时间间隔小于1小时, 则向上合并
        if (this.last && this.last.name === data.name && new Date(data.time).getTime() - new Date(this.last.time).getTime() < 1000 * 60 * 60) {
            this.last.item.querySelector('ul').appendChild(ListItem({ textContent: data.text }))
            this.last = { ...data, item: this.last.item }
            if (scroll || local) {
                this.ul.scrollTop = this.ul.scrollHeight
            }
            return
        }
        this.ul.appendChild(ListItem({
            style: {
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                margin: '1rem',
                padding: '.5rem 1rem',
                boxSizing: 'border-box',
                boxShadow: '0 0 1rem #eee',
                maxWidth: '24rem',
                borderRadius: '1rem',
                listStyle: 'none',
                backgroundColor: 'rgba(255,255,255,.9)',
            },
            children: [
-                Span({ textContent: `${data.name} ${data.time} ${data.text}` }),
+                createElement({
                Button({
                    style: {
-                        boxSizing: 'border-box',
+                        display: 'flex',
-                        boxShadow: '0 0 1rem #eee',
+                        alignItems: 'end',
-                        borderRadius: '1rem',
+                        justifyContent: 'space-between',
-                        fontSize: '12px',
+                        gap: '.25rem',
                        color: '#555'
                    },
-                    textContent: '删除',
+                    children: [
-                    onclick: event => {
+                        Span({ textContent: `${data.name}` }),
-                        event.target.parentNode.remove()
+                        Span({
-                        del(data.id, this.store)
+                            style: {
-                    }
+                                color: '#888',
-                })
+                                fontSize: '12px',
                            },
                            textContent: `${data.time.split(' ')[1].split(':')[0]}:${data.time.split(' ')[1].split(':')[1]}`
                        }),
                        Button({
                            style: {
                                boxSizing: 'border-box',
                                boxShadow: '0 0 1rem #eee',
                                borderRadius: '1rem',
                                fontSize: '12px',
                                color: '#555',
                                marginLeft: 'auto',
                                whiteSpace: 'nowrap',
                            },
                            textContent: '移除',
                            title: '加入屏蔽列表不再被渲染',
                            onclick: event => {
                                event.target.parentNode.remove()
                                update(data.id, item => ({ ban: true, ...item }), this.store)
                            }
                        })
                    ]
                }),
                List({
                    style: {
                        listStyle: 'disc',
                    },
                    children: [
                        ListItem({ textContent: `${data.text}` }),
                    ]
                }),
            ]
        }))
        if (scroll) {
            this.ul.scrollTop = this.ul.scrollHeight
        }
        // 记录到上一条消息
        this.last = { ...data, item: this.ul.lastChild }
    }
    async 存储消息(data) {
        // 检查id是否已经存在
@@ -225,8 +383,10 @@ export default class Chat {
        this.send(data)
    }
    收到消息(data) {
-        console.log('收到消息', data)
+        const { avatar, ...save } = data
        this.添加元素(data)
-        this.存储消息(data)
+        this.存储消息(save)
        this.通知栏消息(data)
        this.播放提示音()
    }
 }
--- a/src/client.js
+++ b/src/client.js
@@ -32,40 +32,46 @@ export default class ClientList {
                const webrtc_init = async () => {
                    const webrtc = new RTCPeerConnection({
                        iceServers: [
-                            {
+                            ...[
-                                urls: 'turn:satori.love:3478?transport=udp',
+                                'stun:stun.voipbuster.com',    // 德国 黑森州 美因河畔法兰克福
-                                username: 'x-username',
+                                'stun:stun.voipstunt.com',     // 德国 黑森州 美因河畔法兰克福
-                                credential: 'x-password'
+                                'stun:stun.internetcalls.com', // 德国 黑森州 美因河畔法兰克福
-                            },
+                                'stun:stun.voip.aebc.com',     // 加拿大 不列颠哥伦比亚省 温哥华
-                            {
+                                'stun:stun.1und1.de',
-                                urls: [
+                                'stun:stun.callwithus.com',
-                                    'stun:stun.1und1.de',
+                                'stun:stun.ekiga.net',
-                                    'stun:stun.callwithus.com',
+                                'stun:stun.fwdnet.net',
-                                    'stun:stun.ekiga.net',
+                                'stun:stun.fwdnet.net:3478',
-                                    'stun:stun.fwdnet.net',
+                                'stun:stun.gmx.net',
-                                    'stun:stun.fwdnet.net:3478',
+                                'stun:stun.iptel.org',
-                                    'stun:stun.gmx.net',
+                                'stun:stun.minisipserver.com',
-                                    'stun:stun.iptel.org',
+                                'stun:stun.schlund.de',
-                                    'stun:stun.internetcalls.com',
+                                'stun:stun.sipgate.net',
-                                    'stun:stun.minisipserver.com',
+                                'stun:stun.sipgate.net:10000',
-                                    'stun:stun.schlund.de',
+                                'stun:stun.softjoys.com',
-                                    'stun:stun.sipgate.net',
+                                'stun:stun.softjoys.com:3478',
-                                    'stun:stun.sipgate.net:10000',
+                                'stun:stun.voxgratia.org',
-                                    'stun:stun.softjoys.com',
+                                'stun:stun.wirlab.net',
-                                    'stun:stun.softjoys.com:3478',
+                                'stun:stun.xten.com',
-                                    'stun:stun.voip.aebc.com',
+                                'stun:stunserver.org',
-                                    'stun:stun.voipbuster.com',
+                                'stun:stun01.sipphone.com',
-                                    'stun:stun.voipstunt.com',
+                                'stun:stun.zoiper.com',
-                                    'stun:stun.voxgratia.org',
+                                'stun:stun1.l.google.com:19302',
-                                    'stun:stun.wirlab.net',
+                                'stun:stun2.l.google.com:19302',
-                                    'stun:stun.xten.com',
+                                'stun:stun3.l.google.com:19302',
-                                    'stun:stunserver.org',
+                                'stun:stun4.l.google.com:19302',
-                                    'stun:stun01.sipphone.com',
+                                'stun:stun.ideasip.com',
-                                    'stun:stun.zoiper.com'
+                                'stun:stun.stunprotocol.org:3478',
-                                ]
+                                'stun:stun.voiparound.com',
-                            }
+                                'stun:stun.services.mozilla.com',
                            ].map(url => ({ urls: url }))
                            //{
                            //    urls: 'turn:satori.love:3478?transport=udp',
                            //    username: 'x-username',
                            //    credential: 'x-password'
                            //},
                        ],
-                        iceCandidatePoolSize: 10,  // 限制 ICE 候选者的数量
+                        iceCandidatePoolSize: 64,  // 限制 ICE 候选者的数量
                        iceTransportPolicy: 'all', // 使用所有可用的候选者
                        bundlePolicy: 'max-bundle',// 将所有媒体流捆绑在一起，以最大程度地提高性能和减少延迟
                        sctp: {
@@ -95,18 +101,18 @@ export default class ClientList {
                                option.onmessage(event, client)
                            }
                        }
-                        //channel.onclose = event => {
+                        channel.onclose = event => {
-                        //    console.debug('对方关闭', channel.label, '数据通道')
+                            console.debug('对方关闭', channel.label, '数据通道')
-                        //    if (option && option.onclose) {
+                            if (option && option.onclose) {
-                        //        option.onclose(event, client)
+                                option.onclose(event, client)
-                        //    }
+                            }
-                        //}
+                        }
-                        //channel.onerror = event => {
+                        channel.onerror = event => {
-                        //    console.error(data.name, '通道', channel.label, '发生错误')
+                            console.error(data.name, '通道', channel.label, '发生错误')
-                        //    if (option && option.onerror) {
+                            if (option && option.onerror) {
-                        //        option.onerror(event, client)
+                                option.onerror(event, client)
-                        //    }
+                            }
-                        //}
+                        }
                    }
                    webrtc.onicecandidate = event => {
                        if (event.candidate) {
@@ -118,8 +124,10 @@ export default class ClientList {
                        }
                    }
                    webrtc.oniceconnectionstatechange = async event => {
                        console.log(data.name, 'ICE 连接状态:', webrtc.iceConnectionState, webrtc.iceGatheringState)
                        if (webrtc.iceConnectionState === 'disconnected' || webrtc.iceConnectionState === 'failed') {
-                            console.error(data.name, '需要添加新的 candidate')
+                            const client = this.clientlist.find(x => x.id === data.id) ?? {}
                            console.error(data.name, '需要添加新的 candidate', webrtc.iceConnectionState, client.online)
                            // 添加新的 candidate
                        } else if (webrtc.iceConnectionState === 'connected' || webrtc.iceConnectionState === 'completed') {
                            //console.debug(data.name, 'WebRTC 连接已经建立成功')
@@ -147,7 +155,7 @@ export default class ClientList {
                    const { webrtc, channels } = await webrtc_init()
                    const offer = await webrtc.createOffer()
                    await webrtc.setLocalDescription(offer)
-                    this.clientlist.push({ id: data.id, name: data.name, webrtc, channels })
+                    this.clientlist.push({ id: data.id, name: data.name, webrtc, channels, online: true })
                    websocket.send(JSON.stringify({ type: 'offer', id: data.id, offer }))
                    this.push(this.clientlist.find(client => client.id === data.id))
                    return
@@ -158,11 +166,14 @@ export default class ClientList {
                }
                if (data.type === 'pull') {
                    //console.debug('移除客户端:', data)
                    const client = this.clientlist.find(client => client.id === data.id)
                    if (!client) return console.error('目标用户本不存在')
                    client.online = false  // 离开时改变状态
                    return this.exit(data)
                }
                if (data.type === 'offer') {
                    const { webrtc, channels } = await webrtc_init()
-                    this.clientlist.push({ id: data.id, name: data.name, webrtc, channels })
+                    this.clientlist.push({ id: data.id, name: data.name, webrtc, channels, online: true })
                    this.push(this.clientlist.find(client => client.id === data.id))
                    await webrtc.setRemoteDescription(data.offer)
                    const answer = await webrtc.createAnswer()
@@ -239,7 +250,7 @@ export default class ClientList {
        const avatar = localStorage.getItem('avatar')
        this.push({ id, name: username, avatar }, true)
    }
-    async 用户列表() {}
+    async 用户列表() { }
    async 用户加入(data) {
        await set(data.id, data, this.store)
        this.push(data)
--- a/src/indexeddb.js
+++ b/src/indexeddb.js
@@ -1,92 +0,0 @@
 export default class IndexedDB {
    constructor(databaseName, databaseVersion) {
        this.databaseName = databaseName
        this.databaseVersion = databaseVersion
        this.db = null
    }
    open(name) {
        return new Promise((resolve, reject) => {
            const request = indexedDB.open(this.databaseName, this.databaseVersion)
            request.onerror = (event) => {
                reject(event.target.error)
            }
            request.onsuccess = (event) => {
                this.db = event.target.result
                resolve(this.db)
            }
            request.onupgradeneeded = (event) => {
                const db = event.target.result
                if (!db.objectStoreNames.contains(name)) {
                    db.createObjectStore(name, { keyPath: 'id' })
                    console.log('store created:', name)
                }
            }
        })
    }
    async store(name) {
        if (!this.db) await this.open(name)
        return new Promise((resolve, reject) => {
            const transaction = this.db.transaction([name], 'readwrite')
            const objectStore = transaction.objectStore(name)
            resolve(objectStore)
        })
    }
    getAll(name) {
        return new Promise((resolve, reject) => {
            const transaction = this.db.transaction([name], 'readonly')
            const objectStore = transaction.objectStore(name)
            const request = objectStore.getAll()
            request.onerror = (event) => {
                reject(event.target.error)
            }
            request.onsuccess = (event) => {
                resolve(event.target.result)
            }
        })
    }
    add(name, data) {
        return new Promise((resolve, reject) => {
            const transaction = this.db.transaction([name], 'readwrite')
            const objectStore = transaction.objectStore(name)
            const request = objectStore.add(data)
            request.onerror = (event) => {
                reject(event.target.error)
            }
            request.onsuccess = (event) => {
                resolve(event.target.result)
            }
        })
    }
    put(name, data) {
        return new Promise((resolve, reject) => {
            const transaction = this.db.transaction([name], 'readwrite')
            const objectStore = transaction.objectStore(name)
            const request = objectStore.put(data)
            request.onerror = (event) => {
                reject(event.target.error)
            }
            request.onsuccess = (event) => {
                resolve(event.target.result)
            }
        })
    }
    delete(name, id) {
        return new Promise((resolve, reject) => {
            const transaction = this.db.transaction([name], 'readwrite')
            const objectStore = transaction.objectStore(name)
            const request = objectStore.delete(id)
            request.onerror = (event) => {
                reject(event.target.error)
            }
            request.onsuccess = (event) => {
                resolve(event.target.result)
            }
        })
    }
 }
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,14 @@
-import 'virtual:windi.css'
+import * as idb from 'idb-keyval'
 import IndexedDB from './indexeddb.js'
 import MusicList from './music.js'
 import ClientList from './client.js'
 import Chat from './chat.js'
 import { Buffer } from "buffer"
 import process from "process"
 window.Buffer = Buffer
 window.process = process
 import { parseBlob } from 'music-metadata-browser'
 // 缓冲分片发送
 const CHUNK_SIZE = 1024 * 64  // 默认每个块的大小为128KB
 const THRESHOLD = 1024 * 1024 // 默认缓冲区的阈值为1MB
@@ -19,13 +23,27 @@ function appendBuffer(buffer1, buffer2) {
 }
 // 读取本地音乐列表并标识为缓存状态(本地缓存)
-const database = new IndexedDB('musicDatabase', 1)
+const musicStore = idb.createStore('database', 'music')
 await database.store('musicObjectStore') // 音乐(为什么会用这么丑的格式呢)
 // 读取本地音乐列表并标识为缓存状态(本地缓存)
-const list = (await database.getAll('musicObjectStore')).map(item => {
+const list = await idb.values(musicStore)
-  return { save: true, ...item }
+for (const item of list) {
-})
+  if (!item.picture && item.picture !== false) {
    console.log('提取封面', item.name)
    const blob = new Blob([item.arrayBuffer], { type: item.type })
    const metadata = await parseBlob(blob)
    const picture = metadata.common.picture?.[0]
    if (picture) {
      const format = picture.format
      const data = picture.data
      item.picture = `data:${format};base64,${Buffer.from(data).toString('base64')}`
    } else {
      item.picture = false
    }
    idb.set(item.id, item, musicStore)
  }
  item.save = true
 }
 // 读取本地用户名(本地缓存)
 const name = localStorage.getItem('username') ?? '匿'
@@ -62,8 +80,7 @@ const musicList = new MusicList({
  onlike: (item, list) => {
    console.log('喜欢音乐', item.name)
    if (item.arrayBuffer) {
-      //musicStore.add(item)
+      idb.set(item.id, item, musicStore)
      database.add('musicObjectStore', item)
      clientList.send('base', JSON.stringify({
        type: 'set_music_list',
        list: list.map(({ id, name, size, type }) => ({ id, name, size, type }))
@@ -73,14 +90,30 @@ const musicList = new MusicList({
  onunlike: (item, list) => {
    console.log('取消喜欢', item.name)
    if (item.arrayBuffer) {
-      database.delete('musicObjectStore', item.id)
+      idb.del(item.id, musicStore)
      //musicStore.delete(item.id)
      clientList.send('base', JSON.stringify({
        type: 'set_music_list',
        list: list.map(({ id, name, size, type }) => ({ id, name, size, type }))
      }))
    }
  },
  onsetlrc(item) {
    const input = document.createElement('input')
    input.type = 'file'
    input.accept = '.lrc'
    input.onchange = function () {
      const file = this.files[0]
      const reader = new FileReader()
      reader.onload = function (e) {
        const lrc = e.target.result
        console.log(lrc)
        console.log(item)
        idb.set(item.id, { lrc, ...item }, musicStore)
      }
      reader.readAsText(file)
    }
    input.click()
  },
  onban: item => {
    //console.info('禁止音乐', item.name)
  },
@@ -89,8 +122,7 @@ const musicList = new MusicList({
  },
  onremove: item => {
    //console.info('移除音乐', item.name)
-    //musicStore.delete(item.id)
+    idb.del(item.id, musicStore)
    database.delete('musicObjectStore', item.id)
  },
  onadd: (item, list) => {
    //console.info('添加音乐', item.name)
@@ -122,8 +154,9 @@ const musicList = new MusicList({
        }
      })
      const client = clientList.clientlist.find(client => {
-        return client.musicList.find(x => x.id === item.id)
+        return client.musicList?.find(x => x.id === item.id)
      })
      if (!client) return console.error('未找到拥有此音乐的用户')
      console.info('向', client.name, '请求音乐数据')
      const c = Math.ceil(item.size / CHUNK_SIZE)
@@ -157,7 +190,7 @@ clientList.setChannel('chat', {
    const data = JSON.parse(event.data)
    if (data.type === 'message') {
      console.log(client.name, '发来消息:', data)
-      chat.收到消息({ name: client.name, ...data.text })
+      chat.收到消息({ name: client.name, ...data.text, avatar: client.avatar })
      return
    }
    if (data.type === 'answer') {
@@ -344,3 +377,16 @@ if (localStorage.getItem('avatar')) {
 if (localStorage.getItem('username')) {
  document.title = localStorage.getItem('username')
 }
 // 链接 GIT 仓库
 const git = document.createElement('a')
 git.href = 'https://git.satori.love/laniakeaSupercluster/webrtc'
 git.textContent = 'Git'
 git.target = '_blank'
 git.style.position = 'absolute'
 git.style.bottom = 0
 git.style.right = 0
 git.style.padding = '.5rem'
 git.style.textDecoration = 'none'
 git.style.color = '#555'
 document.body.appendChild(git)
--- a/src/music.js
+++ b/src/music.js
@@ -1,13 +1,14 @@
-import { Span, Button, List, ListItem, UploadMusic, createElement } from './weigets.js'
+import { Img, Span, Button, List, ListItem, UploadMusic, createElement } from './weigets.js'
 export default class MusicList {
-    constructor({ list = [], EventListeners = {}, onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }) {
+    constructor({ list = [], EventListeners = {}, onsetlrc, onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }) {
-        this.event = { onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }
+        this.event = { onsetlrc, onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }
        // 添加音乐播放器
        this.audio = new Audio()
        this.audio.autoplay = true
        this.audio.controls = true
        this.audio.style.margin = '0 auto'
        this.audio.style.flexShrink = 0 // 防止在flex中被挤压变形
        this.audio.addEventListener('play', () => {
            this.event.onplay(this.playing)
@@ -15,28 +16,80 @@ export default class MusicList {
        this.audio.addEventListener('ended', () => {
            this.next()
        })
        //this.audio.addEventListener('timeupdate', () => {
        //    console.log(this.audio.currentTime)
        //})
        //this.audio.addEventListener('error', event => {
        //    console.error('音乐播放器错误:', event)
        //})
        this.ul = List({
            classList: ['music-list'],
            style: {
-                flex: 1,
+                flex: 1,                  // 防止在flex中被挤压变形
-                textOverflow: 'ellipsis',
+                textOverflow: 'ellipsis', // 文本溢出时省略号
-                whiteSpace: 'nowrap',
+                whiteSpace: 'nowrap',     // 不换行
-                overflowX: 'hidden', // 溢出时隐藏
+                overflowX: 'hidden',      // 溢出时隐藏
-                overflowY: 'auto',   // 溢出时显示滚动条
+                overflowY: 'auto',        // 溢出时显示滚动条
-                listStyle: 'disc',   // 实心圆
+                listStyle: 'disc',        // 实心圆
-                padding: '0 1.1rem', // 列表左右留白
+                padding: '0 1.1rem',      // 列表左右留白
                gap: '.1rem',             // 列表项间隔
                display: 'flex',          // 列表垂直排列
                flexDirection: 'column',  // 列表垂直排列
            }
        })
        this.EventListeners = EventListeners
        this.list = []
        list.forEach(item => this.add(item)) // 列表逐一添加
        this.封面 = createElement({
            style: {
                width: '6rem',
                height: '6rem',
                border: 'none',
                borderRadius: '1rem',
                backgroundImage: "url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')",
                backgroundSize: 'cover',
                position: 'relative'
            },
            children: [
                createElement({
                    style: {
                        width: '100%',
                        height: '100%',
                        borderRadius: '1rem',
                        backgroundColor: '#f8f8f8',
                        color: '#f2f2f2',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        fontSize: '4rem',
                        fontWeight: 'bold',
                        textShadow: 'rgb(255, 255, 255) 0px 2px 2px',
                        position: 'absolute',
                        zIndex: -1,
                    },
                    textContent: '♫',
                }),
            ]
        })
        this.标题 = Span({
            style: {
                fontSize: '1.2rem',
                fontWeight: 'bold',
                margin: '0 0 .5rem 0',
            },
            textContent: '',
        })
        const upload = UploadMusic({
            style: { height: '5rem', margin: '1rem 0' },
            onchange: files => {
                for (const file of files) {
                    const id = 'music' + Date.now()
                    const { name, size, type } = file
                    const reader = new FileReader()
                    reader.onload = async event => {
                        const arrayBuffer = event.target.result
                        this.add({ id, name, size, type, arrayBuffer })  // 添加到列表(默认并不存储)
                        this.like({ id, name, size, type, arrayBuffer }) // 本地缓存的必要条件是喜欢
                    }
                    reader.readAsArrayBuffer(file)
                }
            }
        })
        // 收起到右上角, 音乐播放器基于浮窗定位, 不再占用页面空间
        const element = createElement({
@@ -44,18 +97,29 @@ export default class MusicList {
                position: 'fixed', top: '5rem', right: '1rem',
                backgroundColor: '#fff', padding: '.5rem',
                borderRadius: '1rem', cursor: 'pointer',
-                maxWidth: '20rem', maxHeight: '70vh',
+                width: '20rem', Height: '70vh', minWidth: '20rem', maxWidth: '80vw', maxHeight: '80vh',
                overflow: 'hidden', boxShadow: '0 0 1rem #eee',
                display: 'flex', flexDirection: 'column',
                fontSize: '12px', userSelect: 'none',
                zIndex: '10', resize: 'auto',
            },
            onclick: event => {
                this.ul.classList.toggle('disable')
            },
-            onmousedown({ srcElement: dom, clientX, clientY }) {
+            onmousedown({ srcElement: dom, clientX, clientY, offsetX, offsetY }) {
                if (dom !== element) return
-                const [w, h] = [innerWidth - dom.offsetWidth, innerWidth - dom.offsetHeight]
+                if (offsetX > dom.clientWidth - 20 && offsetY > dom.clientHeight - 20) {
                    document.onmouseup = () => {
                        const [w, h] = [innerWidth - dom.clientWidth, innerHeight - dom.clientHeight]
                        if (dom.offsetLeft > w) dom.style.width = innerWidth - dom.offsetLeft + 'px'
                        if (dom.offsetTop > h) dom.style.height = innerHeight - dom.offsetTop + 'px'
                        document.onmouseup = null
                        localStorage.setItem('playerWH', dom.style.width + ',' + dom.style.height)
                    }
                    return
                }
                document.onmouseup = () => {
                    const [w, h] = [innerWidth - dom.clientWidth, innerHeight - dom.clientHeight]
                    if (dom.offsetLeft < 0) dom.style.left = '0px'
                    if (dom.offsetTop < 0) dom.style.top = '0px'
                    if (dom.offsetLeft > w) dom.style.left = w + 'px'
@@ -70,24 +134,76 @@ export default class MusicList {
                }
            },
            children: [
                createElement({
                    style: {
                        display: 'flex', alignItems: 'center',
                        justifyContent: 'space-between', flexShrink: 0,
                        marginBottom: '.5rem',
                    },
                    onclick: event => {
                        // 点击隐藏列表和播放器
                        if (this.ul.style.display === 'none') {
                            this.ul.style.display = 'block'
                            this.audio.style.display = 'block'
                            upload.style.display = 'block'
                        } else {
                            this.ul.style.display = 'none'
                            this.audio.style.display = 'none'
                            upload.style.display = 'none'
                        }
                    },
                    children: [
                        this.封面,
                        createElement({
                            style: {
                                display: 'flex', flexDirection: 'column',
                                alignItems: 'center', justifyContent: 'center',
                                flex: 1, padding: '0 .5rem',
                            },
                            children: [
                                this.标题,
                                createElement({
                                    style: {
                                        display: 'flex', alignItems: 'center',
                                        justifyContent: 'center', flex: 1,
                                    },
                                    children: [
                                        Button({
                                            textContent: '上一首',
                                            onclick: event => {
                                                event.stopPropagation()
                                                this.prev()
                                            }
                                        }),
                                        Button({
                                            textContent: '暂停',
                                            onclick: event => {
                                                event.stopPropagation()
                                                if (this.audio.paused) {
                                                    this.audio.play()
                                                    event.target.textContent = '暂停'
                                                } else {
                                                    this.audio.pause()
                                                    event.target.textContent = '开始'
                                                }
                                            }
                                        }),
                                        Button({
                                            textContent: '下一首',
                                            onclick: event => {
                                                event.stopPropagation()
                                                this.next()
                                            }
                                        }),
                                    ]
                                }),
                            ]
                        }),
                    ]
                }),
                this.audio,
                this.ul,
-                UploadMusic({
+                upload,
                    style: { height: '5rem', margin: '1rem 0' },
                    onchange: files => {
                        for (const file of files) {
                            const id = 'music' + Date.now()
                            const { name, size, type } = file
                            const reader = new FileReader()
                            reader.onload = async event => {
                                const arrayBuffer = event.target.result
                                this.add({ id, name, size, type, arrayBuffer })  // 添加到列表(默认并不存储)
                                this.like({ id, name, size, type, arrayBuffer }) // 本地缓存的必要条件是喜欢
                            }
                            reader.readAsArrayBuffer(file)
                        }
                    }
                })
            ]
        })
        document.body.appendChild(element)
@@ -110,10 +226,13 @@ export default class MusicList {
            ul.music-list > li.play > span {
                color: #02be08;
            }
-            ul.music-list > li.cache::marker {
+            ul.music-list > li::before {
-                color: #02be08;
+                content: '●';
                color: #cccccc;
                font-size: 1em;
-                contentx: '⚡';
+            }
            ul.music-list > li.cache::before {
                color: #02be08;
            }
            ul.music-list > li.disable {
                color: #999999;
@@ -151,8 +270,22 @@ export default class MusicList {
        this.ul.appendChild(ListItem({
            id: item.id,
            classList: item.arrayBuffer ? ['cache'] : [],
            style: {
                display: 'flex', gap: '.25rem', maxWidth: '100%',
                alignItems: 'center', justifyContent: 'space-between',
            },
            children: [
                Img({
                    src: item.picture || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
                    style: { width: '2em', height: '2em', borderRadius: '.25em', backgroundColor: '#eee' },
                }),
                Span({
                    style: {
                        flex: 1,
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                        overflowX: 'hidden',
                    },
                    title: `${item.name} - ${bytesToSize(item.size)} - ${item.type}`,
                    textContent: `${item.name} - ${bytesToSize(item.size)}`,
                    onclick: event => {
@@ -185,14 +318,20 @@ export default class MusicList {
                            this.like(item)
                        }
                    }
                }),
                Button({
                    textContent:'lrc',
                    onclick: () => {
                        this.event.onsetlrc?.(item)
                    }
                })
            ]
        }))
-        this.event.onadd(item, this.list)
+        this.event.onadd?.(item, this.list)
    }
    async remove(item) {
        this.ul.querySelector(`#${item.id}`)?.remove()
-        if (!this.audio.paused) this.stop() // 停止播放
+        if (!this.audio.paused && item.id === this.playing?.id) this.stop() // 停止播放
        this.list = this.list.filter(i => i.id !== item.id)
        this.event.onremove(item)
    }
@@ -252,6 +391,20 @@ export default class MusicList {
                })
            }
        } else {
            const default_picture = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
            this.标题.textContent = item.name
            this.封面.style.backgroundImage = `url(${item.picture || default_picture})`
            // 替换浏览器媒体信息(使系统通知栏显示歌曲信息)
            if ('mediaSession' in navigator) {
                navigator.mediaSession.metadata = new MediaMetadata({
                    title: item.name,
                    artist: '艺术家名',
                    album: '专辑名',
                    artwork: [
                        { src: item.picture || default_picture, sizes: '96x96', type: 'image/jpeg' },
                    ]
                })
            }
            // 本地缓存直接播放
            this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type }))
            this.audio.play()
--- a/src/weigets.js
+++ b/src/weigets.js
@@ -37,6 +37,10 @@ export function Button(options) {
    }, 'button')
 }
 export function Img(options) {
    return createElement(options, 'img')
 }
 export function Input(options) {
    return createElement(options, 'input')
 }
--- a/style.css
+++ b/style.css
@@ -1,97 +0,0 @@
 :root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
 }
 a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
 }
 a:hover {
  color: #535bf2;
 }
 body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
 }
 h1 {
  font-size: 3.2em;
  line-height: 1.1;
 }
 #app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
 }
 .logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
 }
 .logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
 }
 .logo.vanilla:hover {
  filter: drop-shadow(0 0 2em #f7df1eaa);
 }
 .card {
  padding: 2em;
 }
 .read-the-docs {
  color: #888;
 }
 button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
 }
 button:hover {
  border-color: #646cff;
 }
 button:focus,
 button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
 }
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
 }
Author	SHA1	Message	Date
satori	b72be4e004	加入 git 地址	2024-09-04 20:15:57 +08:00
觉	c3c0a37a41	替换发送为图标	2024-03-08 14:04:12 +08:00
觉	03e19fbf58	移除对 indexeddb 的额外封装	2024-03-08 11:03:09 +08:00
觉	099e36e1b5	使用 idb 简化 indexeddb 操作	2024-03-08 11:02:37 +08:00
觉	db8b33299c	Merge branch 'main' of git.satori.love:LaniakeaSupercluster/webrtc 没有说明	2023-12-21 13:00:33 +08:00
觉	231e7f4376	补充安装文档	2023-12-21 13:00:01 +08:00
satori	3dd7e0fa0f	更改重载方式	2023-12-11 17:32:02 +08:00
觉	73d895dc2b	棋子	2023-11-01 20:00:22 +08:00
觉	da3b4e19e9	修正线条和文字	2023-11-01 18:15:38 +08:00
觉	5e0552030a	棋盘可调尺寸	2023-11-01 18:04:26 +08:00
觉	8e18d19b7d	可调边距	2023-11-01 17:47:42 +08:00
觉	5915c717a0	收起音乐列表	2023-11-01 16:42:06 +08:00
觉	2629f262ef	聊天气泡背景色	2023-11-01 01:04:20 +08:00
觉	de06553a8d	棋盘无边距	2023-11-01 00:45:38 +08:00
觉	9dfbb9cd29	棋盘染色	2023-11-01 00:42:02 +08:00
觉	ca924af85b	象棋	2023-10-31 23:51:21 +08:00
觉	6c30ebfc5d	避免列表还未生成	2023-10-31 15:57:58 +08:00
觉	662db2a75b	使用默认图像	2023-10-26 03:18:58 +08:00
觉	a232ece058	防止加载不存在的封面	2023-10-26 03:09:06 +08:00
觉	253a4b7134	前台运行时也播放消息提示音	2023-10-25 23:05:37 +08:00
觉	4ea9a51740	微弱提示音	2023-10-25 22:56:51 +08:00
觉	ae224bd983	通知支持头像	2023-10-25 22:37:28 +08:00
觉	175db8c90c	消息通知	2023-10-25 22:21:37 +08:00
觉	65554afb2f	音乐列表间隙	2023-10-24 10:45:04 +08:00
觉	d43adff7b4	使用 before 取代 marker	2023-10-24 10:40:02 +08:00
觉	3f1fc3b709	修正初始滚动	2023-10-24 10:26:22 +08:00
觉	8b2fd539b4	移除废弃文件	2023-10-24 10:11:19 +08:00
觉	4519a6701e	Refactor music player UI	2023-10-24 08:55:24 +08:00
觉	2c748b029b	DEBUG: 用户加入离开避免影响音乐播放	2023-10-24 08:21:15 +08:00
觉	018246e6dc	Remove console.log statements in Chat class	2023-10-24 06:59:14 +08:00
觉	a641b07de1	时间间隔小于1小时允许合并	2023-10-24 06:57:17 +08:00
觉	7cc8b37d5d	只取时间	2023-10-24 06:48:27 +08:00
觉	938739e8c2	按日期归并	2023-10-24 06:46:40 +08:00
觉	c9477581c8	合并消息	2023-10-24 06:20:41 +08:00
觉	ae5072a490	按钮禁止换行	2023-10-24 05:45:32 +08:00
觉	d75641c8b8	没有封面时也显示封面占位	2023-10-24 05:10:58 +08:00
觉	1fec1bb2f6	Add maxWidth and ellipsis to music list item name	2023-10-24 05:08:09 +08:00
觉	49c5360680	对齐	2023-10-24 05:06:37 +08:00
觉	3c02e2dc82	播放时添加封面	2023-10-24 04:55:22 +08:00
觉	bd3f3d57eb	移除jsmediatags	2023-10-24 03:51:33 +08:00
觉	e269d013e2	新消息自动滚动到底部	2023-10-22 20:06:44 +08:00
觉	f79a2b2f66	移除心跳测试	2023-10-22 18:30:25 +08:00
觉	f85316b86c	ICE 候选者的数量	2023-10-22 17:41:22 +08:00
觉	c268bb1bf7	更多 stun	2023-10-22 17:35:56 +08:00
觉	44a158a2e8	DEBUG STUN服务器列表	2023-10-22 17:30:29 +08:00
觉	8056b0b8cb	禁用 turn	2023-10-22 17:22:39 +08:00
觉	9dae52a858	心跳	2023-10-22 16:30:14 +08:00
觉	caadd67b68	DEBUG: ICE 连接状态	2023-10-22 16:08:42 +08:00
觉	8829a6cbb2	DEBUG: candidate 状态	2023-10-22 15:45:18 +08:00
觉	688ba3a7f6	DEBUG: candidate 状态	2023-10-22 15:42:42 +08:00
觉	f16e3f62cb	降低反复提取封面耗时	2023-10-22 14:21:37 +08:00
XiaoZhuo	277e2dd5b9	播放器可自由拖动大小	2023-10-22 12:30:31 +08:00
XiaoZhuo	f688f6e1b1	Revert "播放器可自由拖动扩展大小" This reverts commit `af80bb2d0b`.	2023-10-22 12:24:55 +08:00
XiaoZhuo	af80bb2d0b	播放器可自由拖动扩展大小	2023-10-22 12:17:11 +08:00
XiaoZhuo	4b1b65c29e	修复层级导致的无法拖动	2023-10-22 10:19:07 +08:00
觉	75888cc69d	从数据加载封面	2023-10-22 02:07:36 +08:00
觉	2248a9d552	文档更新	2023-10-21 21:18:07 +08:00
觉	3d75b3456d	更新文档	2023-10-21 21:05:25 +08:00
觉	a37f469f65	隐藏滚动条	2023-10-21 20:55:47 +08:00
觉	0756b66792	精简时间格式	2023-10-21 20:52:19 +08:00
觉	367bc51c64	本地记录范围内屏蔽(ban	2023-10-21 20:25:08 +08:00