diff --git a/src/client.js b/src/client.js index da9a8e5..b5c4589 100644 --- a/src/client.js +++ b/src/client.js @@ -139,14 +139,11 @@ export default class ClientList { return { webrtc, channels } } if (data.type === 'list') { - //console.debug('取得在线对端列表:', data) const { webrtc, channels } = await webrtc_init() - //console.debug('发送给对方 offer') const offer = await webrtc.createOffer() 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(this.clientlist.find(client => client.id === data.id)) return } @@ -159,12 +156,9 @@ export default class ClientList { return this.exit(data) } if (data.type === 'offer') { - //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() await webrtc.setLocalDescription(answer) @@ -172,13 +166,11 @@ export default class ClientList { return } if (data.type === 'answer') { - //console.debug('收到对方 answer', data) const webrtc = this.clientlist.find(client => client.id === data.id).webrtc await webrtc.setRemoteDescription(data.answer) return } if (data.type === 'candidate') { - //console.debug(data.name, '发来 candidate 候选通道') const webrtc = this.clientlist.find(client => client.id === data.id).webrtc await webrtc.addIceCandidate(data.candidate) return @@ -240,25 +232,26 @@ export default class ClientList { const id = localStorage.getItem('id') const username = localStorage.getItem('username') const avatar = localStorage.getItem('avatar') - console.log('我的帐户:', { id, username, avatar }) this.push({ id, name: username, avatar }, true) } async 用户列表() {} - async 用户加入({ name, id }) { - await set(id, { name, id }, this.store) + async 用户加入(data) { + await set(data.id, data, this.store) + this.push(data) } - async 用户离开({ id }) { await del(id, this.store) } - getAvatar(id) { } - setAvatar(user) { - //console.info('更新avatar', user) - document.getElementById(user.id).querySelector('img').src = user.avatar - const u = this.clientlist.find(client => client.id === user.id) - u.avatar = user.avatar - //console.log(u, user) - //.avatar = user.avatar + async 用户更新({ id, name, avatar }) { + const client = this.clientlist.find(client => client.id === id) + if (client.name !== name) { + client.name = name + document.getElementById(id).querySelector('span').textContent = name + } + if (client.avatar !== avatar) { + client.avatar = avatar + document.getElementById(id).querySelector('img').src = avatar + } } exit(item) { const client = this.clientlist.find(client => client.id === item.id) diff --git a/src/main.js b/src/main.js index c183dac..70c59af 100644 --- a/src/main.js +++ b/src/main.js @@ -257,7 +257,7 @@ clientList.setChannel('profile', { const data = JSON.parse(event.data) client.name = data.name client.avatar = data.avatar - clientList.setAvatar({ id: client.id, ...data }) + clientList.用户更新({ id: client.id, ...data }) }, onclose: event => { console.log('关闭信道', event.target.label)