用户更新

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)

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)