diff --git a/public/client.js b/public/client.js index d6f0e56..20c9ff7 100644 --- a/public/client.js +++ b/public/client.js @@ -127,12 +127,13 @@ export default class ClientList { await webrtc.setLocalDescription(offer) this.clientlist.push({ id: data.id, name: data.name, webrtc, channels }) websocket.send(JSON.stringify({ type: 'offer', id: data.id, offer })) - this.push(data) + // 传递正确的指针给元素, 以便其能够调取正确的头像 + this.push(this.clientlist.find(client => client.id === data.id)) return } if (data.type === 'push') { console.debug('新上线客户端:', data) - return this.push(data) + return } if (data.type === 'pull') { console.debug('移除客户端:', data) @@ -142,6 +143,8 @@ export default class ClientList { console.debug('收到对方 offer', data) const { webrtc, channels } = await webrtc_init() this.clientlist.push({ id: data.id, name: data.name, webrtc, channels }) + // 传递正确的指针给元素, 以便其能够调取正确的头像 + this.push(this.clientlist.find(client => client.id === data.id)) console.debug('发送给对方 answer') await webrtc.setRemoteDescription(data.offer) const answer = await webrtc.createAnswer() @@ -182,7 +185,10 @@ export default class ClientList { setAvatar(user) { console.info('更新avatar', user) document.getElementById(user.id).querySelector('img').src = user.avatar - this.clientlist.find(client => client.id === user.id).avatar = user.avatar + const u = this.clientlist.find(client => client.id === user.id) + u.avatar = user.avatar + console.log(u, user) + //.avatar = user.avatar } exit(item) { const client = this.clientlist.find(client => client.id === item.id) @@ -195,7 +201,7 @@ export default class ClientList { this.channels[name] = option } // 新上线客户端 - push(item, self=false) { + push(item, self = false) { this.element.appendChild(ListItem({ id: item.id, style: { @@ -207,10 +213,24 @@ export default class ClientList { fontSize: '12px', borderRadius: '8px', }, + children: [ + Avatar({ + src: item.avatar || '/favicon.ico', + style: { + width: '32px', + height: '32px', + borderRadius: '50%', + cursor: 'pointer', + }, + }), + Span({ + textContent: item.name ?? item.id + }) + ], onclick: event => document.body.appendChild(Dialog({ children: [ Avatar({ - src: item.avatar ?? '/favicon.ico', + src: item.avatar || '/favicon.ico', style: { width: '240px', height: '240px', @@ -220,6 +240,7 @@ export default class ClientList { cursor: 'pointer', }, onclick: event => { + console.log('点击头像', item) if (!self) return console.log('只能修改自己的头像') const input = document.createElement('input') input.type = 'file' @@ -258,21 +279,7 @@ export default class ClientList { } }) ] - })), - children: [ - Avatar({ - src: item.avatar ?? '/favicon.ico', - style: { - width: '32px', - height: '32px', - borderRadius: '50%', - cursor: 'pointer', - }, - }), - Span({ - textContent: item.name ?? item.id - }) - ] + })) })) } // 添加回调函数