From fa2e4ed7af9b3c3e1c20c70b0ff8116e9f57a869 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Fri, 6 Oct 2023 18:53:13 +0800
Subject: [PATCH] =?UTF-8?q?DEBUG=20RTC=20=E5=BB=BA=E7=AB=8B=E9=A1=BA?=
 =?UTF-8?q?=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/entanglement.js | 39 ++++++++++++++++++++-------------------
 public/test.html       |  9 +++++++++
 2 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/public/entanglement.js b/public/entanglement.js
index e946240..d45d169 100644
--- a/public/entanglement.js
+++ b/public/entanglement.js
@@ -38,16 +38,16 @@ export default class Entanglement {
         }
         // 当有新的数据通道加入时触发
         pc.ondatachannel = event => {
-            console.log(user.name, '建立', event.channel.label, '通道')
+            console.log(user.name, '建立', event.channel.label, '接收通道')
             event.channel.onmessage = event => {
-                console.log(user.name, '收到', event.target.label, '通道消息', event.data)
+                console.log(user.name, '发来', event.target.label, '通道消息', event.data)
             }
             event.channel.onopen = () => {
-                console.log(user.name, '打开', event.channel.label, '通道')
-                event.channel.send('hello')
+                console.log(user.name, '打开', event.channel.label, '接收通道')
+                //event.channel.send(JSON.stringify({ name: 'sato', hello: 'world' }))
             }
             event.channel.onclose = () => {
-                console.log(user.name, '关闭', event.channel.label, '通道')
+                console.log(user.name, '关闭', event.channel.label, '接收通道')
             }
             event.channel.onerror = () => {
                 console.log(user.name, '通道', event.channel.label, '发生错误')
@@ -57,17 +57,17 @@ export default class Entanglement {
         user.channels = this.channels.map(item => {
             const channel = pc.createDataChannel(item.name, { reliable: true })
             channel.onopen = () => {
-                console.log('打开数据通道')
+                console.log('打开数据发送通道')
                 channel.send(JSON.stringify({ name: 'sato', hello: 'world' }))
             }
             channel.onmessage = event => {
-                console.log('收到数据通道消息', event.data)
+                console.log('收到数据发送通道消息', event.data)
             }
             channel.onclose = () => {
-                console.log('关闭数据通道')
+                console.log('关闭数据发送通道')
             }
             channel.onerror = () => {
-                console.log('数据通道发生错误')
+                console.log('发送通道发生错误')
             }
             return { channel, ...item }
         })
@@ -98,13 +98,13 @@ export default class Entanglement {
             const data = JSON.parse(event.data)
             if (data.type === 'list') {
                 console.debug('收到在线列表', data.list)
-                this.users = await Promise.all(data.list.map(async user => {
+                await Promise.all(data.list.map(async user => {
                     console.debug('发送给', user.name, 'offer')
                     const pc = await this.__create_webrtc(user)
                     const offer = await pc.createOffer()
                     await pc.setLocalDescription(offer)
+                    this.users.push({ ...user, webrtc: pc }) // 必须在send之前存入
                     this.ws.send(JSON.stringify({ type: 'offer', user, offer }))
-                    return { ...user, webrtc: pc }
                 }))
                 return
             }
@@ -133,7 +133,7 @@ export default class Entanglement {
                 return
             }
             if (data.type === 'candidate') {
-                console.debug(data.user.name, '发来 candidate 候选通道')
+                console.debug(data.user.name, '发来 candidate 候选通道', JSON.stringify(this.users))
                 const pc = this.users.find(user => user.id === data.user.id).webrtc
                 await pc.addIceCandidate(data.candidate)
                 return
@@ -147,14 +147,15 @@ export default class Entanglement {
     send_all(channel_name, data) {
         console.log('向', channel_name, '频道广播消息:', data)
         console.log('在线用户:', this.users)
-        this.users.filter(user => {
-            const status = user.webrtc.iceConnectionState
-            console.log('用户', user.name, '连接状态:', status)
-            return status === 'connected' || status === 'completed'
-        }).forEach(user => {
+        this.users.forEach(async user => {
             console.log('向', user.name, '发送', channel_name, '频道消息:', data)
-            const channel = user.channels.find(item => item.name === channel_name).channel
-            channel.onopen = () => channel.send(JSON.stringify(data))
+            const ch = user.channels.find(item => item.name === channel_name).channel
+            // 等待 datachannel 打开(临时解决方案)
+            while (ch.readyState !== 'open') {
+                await new Promise(resolve => setTimeout(resolve, 100))
+            }
+            console.log('完成发送', channel_name, '频道消息:', data)
+            ch.send(JSON.stringify(data))
         })
     }
 
diff --git a/public/test.html b/public/test.html
index 4f6bfd2..4cfe273 100644
--- a/public/test.html
+++ b/public/test.html
@@ -62,6 +62,15 @@
         const store = entanglement.get('json')
         await new Promise(resolve => setTimeout(resolve, 3000))
         store.users.name = 'koishi'
+
+        const element = document.createElement('ul')
+        element.innerHTML = store.users.list.map(user => `<li>${user.name}</li>`).join('')
+        element.onclick = () => {
+            store.users.list.push({ name: 'koishi' })
+        }
+        document.body.appendChild(element)
+        
+
         //users.list.push({ name: 'koishi' })
     </script>
 </body>