diff --git a/README.md b/README.md index 3a942ad..401e1d6 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ webrtc 实现的 p2p 信道 - [x] 主机记录各自曲目列表以供查询 - [x] 播放时高亮显示 - [x] 合并操作按钮 + - [ ] 对方退出时清除其列表 - [ ] 集群分发 - [ ] 下载加速 - [ ] 即时通讯 diff --git a/public/client.js b/public/client.js index 5508c28..b499055 100644 --- a/public/client.js +++ b/public/client.js @@ -1,7 +1,8 @@ import { List, ListItem } from './weigets.js' export default class ClientList { - constructor({ channels = {}, EventListeners = {}, name: username }) { + constructor({ channels = {}, EventListeners = {}, name: username, onexit }) { + this.event = { onexit } this.channels = channels this.EventListeners = EventListeners const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws' @@ -87,7 +88,7 @@ export default class ClientList { } if (data.type === 'pull') { //console.log('移除客户端:', data) - return this.remove(data) + return this.exit(data) } if (data.type === 'offer') { //console.log('收到对方 offer', data) @@ -125,6 +126,13 @@ export default class ClientList { } this.websocket = linkStart() } + exit(item) { + const client = this.clientlist.find(client => client.id === item.id) + if (!client) return console.log('目标用户本不存在') + this.clientlist = this.clientlist.filter(client => client.id !== item.id) + this.ul.removeChild(document.getElementById(item.id)) + this.event.onexit(client) + } setChannel(name, option) { this.channels[name] = option } @@ -137,10 +145,6 @@ export default class ClientList { chidren: [] })) } - remove(item) { - this.clientlist = this.clientlist.filter(client => client.id !== item.id) - this.ul.removeChild(document.getElementById(item.id)) - } // 添加回调函数 on(name, callback) { this.EventListeners[name] = callback diff --git a/public/index.html b/public/index.html index fa588e9..c400201 100644 --- a/public/index.html +++ b/public/index.html @@ -16,6 +16,19 @@ import MusicList from './music.js' import ClientList from './client.js' + // 缓冲分片发送 + const CHUNK_SIZE = 1024 * 64 // 每个块的大小为128KB + const THRESHOLD = 1024 * 1024 // 缓冲区的阈值为1MB + const DELAY = 100 // 延迟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 database = new IndexedDB('musicDatabase', 1, 'musicObjectStore') await database.open() @@ -25,7 +38,26 @@ const name = localStorage.getItem('username') ?? '游客' // 初始化客户端列表 - const clientList = new ClientList({ name }) + const clientList = new ClientList({ + name, + onexit: async client => { + console.log(client.name, '离开频道', client) + // 从列表中移除未缓存的此用户的音乐, 但可能多人都有此音乐且未缓存 + // 因此每条音乐都要检查是否有其他用户也有此音乐, 如果有则不移除 + //musicList.list.filter(item => !item.arrayBuffer).forEach(item => { + // const client = clientList.clientlist.find(client => { + // return client.musicList.find(x => x.id === item.id) + // }) + // if (!client) { + // console.log('没有用户存留此音乐了, 移除记录', item.name) + // musicList.remove(item) + // } else { + // console.log(client.name, '中还有此音乐, 保留记录', item.name) + // } + //}) + + } + }) // 初始化音乐列表(加入本地缓存) const musicList = new MusicList({ @@ -105,18 +137,6 @@ } }) - // 缓冲分片发送 - const CHUNK_SIZE = 1024 * 128 // 每个块的大小为128KB - const THRESHOLD = 1024 * 1024 // 缓冲区的阈值为1MB - const DELAY = 100 // 延迟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 - } // 只有一个基本信道, 用于交换和调度信息 clientList.setChannel('base', { onopen: async event => { @@ -139,7 +159,7 @@ console.log(client.name, '发来音乐列表:', `x${JSON.parse(event.data).list.length}`) console.log('将列表保存到本机记录:', client) client.musicList = list - list.forEach(item => musicList.add(item)) + client.musicList.forEach(music => musicList.add(music)) return } if (type === 'get_music_data') {