From 10e46714b04507c77871699e2dc4ad0145398648 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A7=89?= Date: Thu, 5 Oct 2023 03:22:05 +0800 Subject: [PATCH] DEBUG --- README.md | 5 ++++- public/client.js | 7 ++++++- public/index.html | 44 +++++++++++++++++++++++++++++++++----------- 3 files changed, 43 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 2d0af68..f7e01fc 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,8 @@ webrtc 实现的 p2p 信道 - [x] P2P通信 - [ ] 分离出主要功能, 作为库或桁架使用 + - [ ] 静态资源服务模式 + - [ ] 集群分发 - [x] 音乐播放 - [x] 请求到单个目标防止接收到重复分片数据 - [x] 主机记录各自曲目列表以供查询 @@ -20,9 +22,10 @@ webrtc 实现的 p2p 信道 - [ ] 分片播放时支持flac - [ ] 取消本地存储时检查是否移除(其它成员可能有同一曲) - [ ] 成员列表刷新时播放被重置BUG -- [ ] 集群分发 + - [ ] 削弱刷新带来的影响 - [ ] 下载加速 - [ ] 即时通讯 +- [ ] 画廊 - 能获取所有在线设备列表 - 随机连接至四个设备, 且按效率扩展收缩 diff --git a/public/client.js b/public/client.js index e4ba09d..08c8930 100644 --- a/public/client.js +++ b/public/client.js @@ -208,6 +208,12 @@ export default class ClientList { const avatar = localStorage.getItem('avatar') this.add({ id: 'self', name: username, avatar }) } + getAvatar(id) { } + setAvatar(user) { + console.log('更新avatar', user) + document.getElementById(user.id).querySelector('img').src = user.avatar + this.clientlist.find(client => client.id === user.id).avatar = user.avatar + } exit(item) { const client = this.clientlist.find(client => client.id === item.id) if (!client) return console.log('目标用户本不存在') @@ -219,7 +225,6 @@ export default class ClientList { this.channels[name] = option } add(item) { - console.log(item) this.element.appendChild(ListItem({ id: item.id, onclick: event => { diff --git a/public/index.html b/public/index.html index 53f2e29..cb2b384 100644 --- a/public/index.html +++ b/public/index.html @@ -38,6 +38,7 @@ // 读取本地用户名(本地缓存) const name = localStorage.getItem('username') ?? '游客' + const avatar = localStorage.getItem('avatar') ?? '/favicon.ico' // 初始化客户端列表 const clientList = new ClientList({ @@ -46,7 +47,7 @@ console.log(client.name, '离开频道', client) // 从列表中移除未缓存的此用户的音乐, 但可能多人都有此音乐且未缓存 // 因此每条音乐都要检查是否有其他用户也有此音乐, 如果有则不移除 - const 此用户音乐 = client.musicList.map(item => item.id) + const 此用户音乐 = client.musicList?.map(item => item.id) || [] const 无数据音乐 = musicList.list.filter(item => !item.arrayBuffer).filter(item => { return 此用户音乐.includes(item.id) }) @@ -150,10 +151,31 @@ console.log('打开信道', 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 { type, id, channel, list } = JSON.parse(event.data) - if (type === 'get_music_list') { + 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_music_list') { const ms = musicList.list.filter(item => item.arrayBuffer) console.log(client.name, '请求音乐列表:', ms) clientList.sendto(client.id, 'base', JSON.stringify({ @@ -162,20 +184,20 @@ })) return } - if (type === 'set_music_list') { + if (data.type === 'set_music_list') { console.log(client.name, '发来音乐列表:', `x${JSON.parse(event.data).list.length}`) console.log('将列表保存到本机记录:', client) - client.musicList = list + client.musicList = data.list client.musicList.forEach(music => musicList.add(music)) return } - if (type === 'get_music_data') { + if (data.type === 'get_music_data') { // 建立一个信道, 用于传输音乐数据(接收方已经准备好摘要信息) console.log(client.name, '建立一个信道, 用于传输音乐数据', musicList.list) - musicList.list.filter(item => item.id === id).forEach(item => { - const ch = client.webrtc.createDataChannel(channel, { reliable: true }) + 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, `打开 ${channel} 信道传输音乐数据`, item.name) + console.log(client.name, `打开 ${data.channel} 信道传输音乐数据`, item.name) // 将音乐数据分成多个小块，并逐个发送 async function sendChunk(dataChannel, data, index = 0, buffer = new ArrayBuffer(0)) { while (index < data.byteLength) { @@ -190,13 +212,13 @@ return buffer } await sendChunk(ch, item.arrayBuffer) - console.log(client.name, `获取 ${channel} 信道数据结束`, item.name) + console.log(client.name, `获取 ${data.channel} 信道数据结束`, item.name) ch.close() // 关闭信道 } }) return } - console.log('未知类型:', type) + console.log('未知类型:', data.type) }, onclose: event => { console.log('关闭信道', event.target.label)