From 17d29ebfa6c7290811f84f11cfa2e3beba58e9f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Wed, 27 Sep 2023 15:01:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=95=E7=A4=BA=E8=AE=BE=E5=A4=87=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md         | 14 +++++++++++---
 public/index.html |  9 ++++++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 413b660..cfaac20 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,12 @@
 # webRTC
 webrtc 实现的 p2p 信道
 
+- [ ] P2P通信
+- [ ] 集群分发
+- [ ] 下载加速
+- [ ] 音乐播放
+- [ ] 即时通讯
+
 - 能获取所有在线设备列表
 - 随机连接至四个设备, 且按效率扩展收缩
 - 将数据拆解同时向多台设备分发, 对端接收后再次分发
@@ -8,6 +14,8 @@ webrtc 实现的 p2p 信道
 - 五色
 - 单向链
 - 固定填位(矩阵)
-- [a1, b1, c1, d1, e1]
--         [a2, b2, c2, d2, e2]
--                 [a3, b3, c3, d3, e3]
+```txt
+[a1, b1, c1, d1, e1]
+        [a2, b2, c2, d2, e2]
+                [a3, b3, c3, d3, e3]
+```
diff --git a/public/index.html b/public/index.html
index 5ce65d7..a7cc14f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,12 +14,13 @@
     <script type="module">
         // webRTC 传递音乐(分别传输文件和操作事件能更流畅)
         const music = async function () {
+            const ul = document.createElement('ul')
+            document.body.appendChild(ul)
             const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
             const host = window.location.host
             const ws = new WebSocket(`${protocol}://${host}/webrtc/music`)
             const pc = new RTCPeerConnection()
             const clients = []
-
             // 监听 ICE 候选事件
             pc.onicecandidate = event => {
                 if (event.candidate) {
@@ -39,6 +40,10 @@
                 if (data.type === 'push') {
                     console.log('收到 type:push 将设备增加', data.id)
                     clients.push({ id: data.id, channel: data.channel })
+                    const li = document.createElement('li')
+                    li.innerText = `id:${data.id} channel:${data.channel}`
+                    li.id = data.id
+                    ul.appendChild(li)
                     return
                 }
                 if (data.type === 'pull') {
@@ -46,6 +51,8 @@
                     const index = clients.findIndex(client => client.id === data.id)
                     if (index !== -1) {
                         clients.splice(index, 1)
+                        const li = document.getElementById(data.id)
+                        li.remove()
                     }
                     return
                 }