src/client.js

@@ -139,11 +139,14 @@ 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
                 }
@@ -156,9 +159,12 @@ 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)
@@ -166,11 +172,13 @@ 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
@@ -232,26 +240,25 @@ 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 用户加入(data) {
+    async 用户加入({ name, id }) {
-        await set(data.id, data, this.store)
+        await set(id, { name, id }, this.store)
-        this.push(data)
     }
+
     async 用户离开({ id }) {
         await del(id, this.store)
     }
-    async 用户更新({ id, name, avatar }) {
+    getAvatar(id) { }
-        const client = this.clientlist.find(client => client.id === id)
+    setAvatar(user) {
-        if (client.name !== name) {
+        //console.info('更新avatar', user)
-            client.name = name
+        document.getElementById(user.id).querySelector('img').src = user.avatar
-            document.getElementById(id).querySelector('span').textContent = name
+        const u = this.clientlist.find(client => client.id === user.id)
-        }
+        u.avatar = user.avatar
-        if (client.avatar !== avatar) {
+        //console.log(u, user)
-            client.avatar = avatar
+        //.avatar = user.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.用户更新({ id: client.id, ...data })
+    clientList.setAvatar({ id: client.id, ...data })
   },
   onclose: event => {
     console.log('关闭信道', event.target.label)
@@ -300,7 +300,7 @@ clientList.setChannel('base', {
     }
     if (data.type === 'get_music_list') {
       const ms = musicList.list.filter(item => item.arrayBuffer)
-      //console.log(client.name, '请求音乐列表:', ms)
+      console.log(client.name, '请求音乐列表:', ms)
       clientList.sendto(client.id, 'base', JSON.stringify({
         type: 'set_music_list',
         list: ms.map(({ id, name, size, type }) => ({ id, name, size, type }))
@@ -308,7 +308,7 @@ clientList.setChannel('base', {
       return
     }
     if (data.type === 'set_music_list') {
-      //console.log(client.name, '发来音乐列表:', `x${JSON.parse(event.data).list.length}`)
+      console.log(client.name, '发来音乐列表:', `x${JSON.parse(event.data).list.length}`)
       client.musicList = data.list
       client.musicList.forEach(music => musicList.add(music))
       return